元素大小=margi+border+padding+内容
盒子模型 margin：外边距 padding：内边距 border：边框
border
在最上方选择body标签可以进行边距、字体等的初始化
/*body是自带默认边距的，设置边距为0 初始化*/ body{ margin: 0; padding: 0; text-decoration: none; } from{ background: blue; } #box{ /*border:粗细，样式，颜色*/ width: 300px; border: 1px solid red; /*外边距*/ padding: 0; } /*结构伪类选择器搭配子类选择器*/ /*border: solid实线，dashed虚线*/ div:nth-of-type(1) input{ border: 3px solid black; } div:nth-of-type(2) input{ border: 3px dashed black; } div:nth-of-type(3) input{ border: 3px dashed black; } margin&padding可以用来居中 #box{ /*可以是1、2、4个参数，1个参数代表上下左右边距一样 2个参数则分别为上下、左右边距，4个分别为上、下、左、右 auto即可设置自动居中 也可使用margin-xxx分别单独设置上下左右属性*/ /* 要求：块元素 且块元素有固定的宽度*/ margin: 0 auto; } 圆角边框实现按钮等元素的圆角绘制圆形扇形 div{ width: 100px; height: 100px; border: 10px solid red; /*边框圆角大小：一个参数则四个角相等 两个参数则左上右下一样，剩下两个一样 四个参数则从左上开始顺时针*/ border-radius: 50px 20px 10px 5px; /*可以用来画圆，当圆角大小大于（高宽的一半加上边框粗细）就是圆*/ border-radius: 60px; /*扇形需要三个角为0，另一个圆角大小为（两倍边框粗细加上div的边长）*/ } img{ border-radius: 25px; /* 改变图片轮廓形状（头像）*/ } 盒子阴影 div{ width: 100px; height: 100px; border: 10px solid red; box-shadow: 10px 10px 100px yellow;块级元素：独占一行 h1~h6 p div 列表…
行内元素：不独占行 span a img strong…
行内元素可以被包含在块级元素中，反之则不可以。
display和float
div{ width: 100px; height: 100px; border: 1px red; /*display: xxx; inline:变为行内元素 block：变为块元素 inline-block 块元素但是可以内联，在一行*/ display: inline; /*浮动：float 左右浮动*/ float: right; /*clear：不允许有浮动元素 both：两侧 right、lefe：左、右 none 默认 允许*/ clear: right; } 父级边框塌陷问题 增加父级元素的高度：固定了父元素高度，就会被限制在父级元素内最底部增加一个空的div块，清除两侧浮动：简单，但代码中应该尽量避免空div在父类添加一个伪类：稍微复杂，没有副作用，推荐使用 #father{ border: 1px #000 solid; height: 800; } .clear{ padding: 0; margin: 0; clear: both; } #father:after{ content: ''; display: block; clear: both; } overflow 如果块内内容大小超过了块所规定的大小，可以使用overflow来控制隐藏超出部分或者添加块内滚动条。其中overflow：hidden；放在父元素中，可以用来解决父级边框塌陷的问题。但是下拉的一些场景避免使用。 #content{ width: 200px; height: 100px; /*overflow: ; hidden:超出部分隐藏 scroll：滚动条*/ overflow: hidden; }定位：基于xxx定位，上下左右
若没有父级元素定位，基于浏览器定位如果父级元素有绝对或者相对定位，则基于父元素定位在标准文档流中，原来的位置会被改变 div{ position: absolute; right: 100px; }