1.加外边距的时候会和父元素的外边距合并,这时我们会得不到我们自己想要的效果,所以我们可以采用给父元素加内边距的形式达到这个目的。
2.盒子(块元素)的外边距是不会累加的
3.实现居中的几种方式:
(1)margin:0 auto;表示上外边距为0,左右居中。(这种适用于容器的居中)
(2)line-height:设置行高为容器的高度,那么字体(仅限于字体和行内元素)就会在容器中垂直居中
(3)text-align:center:设置内容水平居中的方式
4.body默认的内边距为8px是因为浏览器中的字体大小默认为16px所以,就相当于是0.5em
5.浮动起来的块元素,宽度为0,需要指定宽度
6.浮动起来的元素会随着,屏幕的变化而流动,这就是流动布局,但当我们指定一个div的宽之后,再把浮动的元素放进去是我们做网页的常用方式。
7.高度一般给子元素指定
8.当一个父元素中的块元素浮动起来的时候,父元素的高会变为0,宽为占满整行,为了解决这个问题,我们一般会使用伪元素的方式使父元素有高度
代码:
ul::after{
content: "";
clear: both;
display: block;
}
9.常用属性:
border:1px solid #ccc;
border-radius:50%;设定圆角半径
text-align:center:设置内容水平居中的方式
text-decoraction:none:去除文本的装饰,比如下划线
text-intent:2em:缩进两个字符
box-sizing:border-box;将内容盒子模型变为边框盒子模型
解释:设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px,而不只是单纯的把内容当成200px了。
10.设置CSS的box-sizing属性值为“border-box”,这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!
盒子模型:
(1)内容盒子
(2)边框盒子
box-sizing:
content-box(默认值)
width = 内容宽
border-box
width = 2border+2padding + 内容宽