总结
- margin: 针对不同容器，利用margin来添加距离，存在margin重叠情况；
- padding:让元素的内容跟元素的内边距有一定的边距；
- 当有多行文本时，欲使文本居中，则使用padding添加上下值，使整个文本居中；
- 居中
- 水平居中
- 块状元素的水平居中： margin: 0 auto;
- 行内元素的水平居中：父元素中设置 text-align:center;
- 垂直居中
- 块状元素的垂直居中：vertical-align: middle;也可以通过设置父元素的padding或本元素的margin的具体值来实现垂直居中；
- 行内元素的垂直居中：
- 单行文本的垂直居中：line-height与height值相同；
- 多行文本的垂直居中：给多行文本容器外面添加一个新的容器，通过设置新容器的padding使内部容器垂直居中；
- 设置定位后的水平垂直定位方法：元素设置position:absolute;父容器设置position:relative;通过设置left,top等定位值，来使本元素相对于父容器进行定位；如以下代码：
/*类选择器container为父容器*/
.container{
position:relative;
}
/*p为子元素*/
p{
width:100px;
height: 120px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
matgin-top: -60px;
}
- ul的居中：主要用于导航栏的书写中
- ul设置position:absolute来使其在页面中进行定位偏移；
- li设置float:left使几个li能够水平紧密连接，利用下一个兄弟选择器（ul li+li{}）来给除了第一个li之外，后面的li设置样式，通过设置margin-left来设置它们之间的距离；
- 实际开发中，导航栏用ul li a三层添加，特别注意的一点是，在默认情况下a标签时行内元素，是不能设置宽高的，而且还有默认的下划线以及颜色设置，它的颜色是不会继承父级的，所以需要给a标签进行一些特殊设置：
- 去除a标签的默认下划线： text-decoration: none;
- 重新设置a标签的字体颜色；
- 重点：在给a标签添背景颜色时，由于a标签为行内元素，所以添加的宽高只有内容宽高大小，不会添加整个li容器，所以需要设置a标签为块状元素，即设置display:block;此时a标签会继承li元素的宽度和行高值，即背景色填充就会填充完整；
- 实际开发中导航栏存在a链接时，最好使用div+a的布局，减少ul>li>a的使用；
- 清除浮动（子元素添加浮动后，会使父级元素的高度塌陷）
- 给父级元素添加高度，能够包含住里面的子元素高度；
- clear:both;
- 重点：在实际开发中，本元素添加浮动会使父级容器的高度塌陷，即高度为零，此时会影响父级容器外元素的正常流动排列，怎样恢复父级容器的高度，添加clear:both；但是添加位置不同，达到的效果也不尽相同；
- 当添加在父级容器中所有添加浮动的子元素的后面时，父级容器高度恢复；
- 当添加在父级容器外面，紧随父级元素后面时，父级元素的高度还是零，但是父级元素外面的其他元素不会受到浮动影响，正常流动排列；
- overflow:hidden;（给父级元素添加，作用是激发BFC）
- clearfix伪类清除浮动；（给父级元素添加after伪类元素，此方法是最有效的方式）
.clearfix:after{
display: block;/*默认情况下伪类是一个行内元素，不能设置宽高*/
height:0;
content: "";
clear:both;
}
- 脱离文档流
- position:absolute;
- float:left;
- position:fixed;
- 页面搭建
- 键值对 key:value;
- position定位
- position:absolute; 绝对定位；
- position:relative; 相对定位；
- position:fixed; 固定定位；
- background背景属性
+ background-color: 背景颜色；
+ background-image: 背景图片,url(" 地址")；
+ background-repeat: 是否重复背景；
+ background-position: 背景位置（left top:左上角）;
- border-radius: 设置圆角，圆形： border-radius:50%;
- 透明度处理：
- rgba():若给元素添加背景色用raba，则背景色会透明，文字不会透明；
- opacity: 0-1;背景透明，文字也透明；
opacity: 0.4;/*不兼容IE7浏览器*/
filter:alpha(opacity=40);/*在IE7浏览器下的处理方式*/
- 遮罩层的写法：
width:100%;;
height:100%;
background:rgba(255,255,255,0.4);
position: absolute;
left: 0;
top: 0;
- 文本超出固定宽度的处理方法：
- 单行文本超出固定宽度后，文本用省略号显示的写法代码：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- 英文不折行的问题处理：
word-wrap: break-word;
- 出现滚动条的写法：
overflow-y: scroll;
- 行内元素的宽高及上下padding不能设置；
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
