黑马程序员技术交流社区
标题: 技术贴 [打印本页]
作者: 段国庆 时间: 2019-6-8 17:57
标题: 技术贴
写静态页面首先就是要分析一下页面的布局，只有分析清楚了布局写的时候才能顺利的写出页面。布局分析无非就是看页面可分为多少个盒子（div），理清盒子与盒子之间的关系。
html的结构是必不可少的
<html>
<head>
<title>标题</tilte>
</head>
<body>
网页主体内容
</body>
</html>
盒子模型组成 内容： 实体化宽高和里面的文字图片等等
边框： border
内边距： padding 拉开内容到盒子边缘的距离；
外边距： margin 拉开盒子与盒子之间的距离；
浮动：浮动布局的原理应用 ： 让元素脱离文档流，进行页面效果的布局；
作用：让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；
属性：float取值：left right none（不浮动默认就是） 浮动的特点浮：浮动之后的元素脱离了标准流； 漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；特：1、浮动之后的盒子的显示模式会更改为行内块元素的特点；2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
浮动和定位能防止外边距合并• 如果盒子有嵌套关系，给子级添加了margin-top就会出现外边距塌陷，但是如果用了浮动或者绝对定位和固定定位，就不会出现这样的问题；
清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；
after伪元素法
/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
双伪元素清除浮动/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1; /*ie6,7 专门清除浮动的样式*/
}
谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
定位属性：position 取值不同实现的效果不同，如下：
静态定位：position:static;
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
overflow溢出隐藏• overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
• overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
• overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
用户界面-鼠标样式• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer;
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
css实现三角形效果第一步 ，设置盒子的宽度高度为0
第二步，设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步，设置边框的颜色 border-color，4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步，为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |