边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式

边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderright

在块元素中宽度auto 适配到父元素,占满

高度auto 由内容撑开

在文本或者行元素居中

在他的块父元素上加text-align:center;

padding不能加负值

行元素没有上下外间距

盒子模型

内容content padding border margin

margin外间距

块元素上下会合并

行元素左右不会合并

行元素不能加上下margin

margin可以设负值,padding不能设负值

margin:0 auto;

margin-top的bug

display显示

将一个任意元素,转换为块元素

display: block;

将一个任意块元素,转换为行元素

display: inline;

讲一个任意元素,从页面上删除

display:none;

将任意一个元素,隐藏

display:inline-block;

overflow溢出

hidden;隐藏

scroll;滚动条

auto;超出就有滚动条,不超出就没有

overflow-x:hidden;横向隐藏

overflow-y:hidden;纵向隐藏

textarea文本域

设置宽高为最小宽高!

resize:both;全都能动

resize:none;固定大小,不能变了

resize:vertical;只能垂直的拖拽

resize:horizontal;只能水平拖拽

float浮动

文档流中的元素看不到浮动的元素

文字,图片,控件除外(进不到浮动元素下边)

浮动停止的条件

紧贴浮动的兄弟元素或紧贴父元素边界时

body的直接子元素不能用浮动

所有能写宽高的元素都要写宽高

解决办法

父元素写死高度

父元素加overflow:hidden;

清除浮动所带来的影响 clear:both; /left/right

margin-top的bug

现象:子元素加上margin-top,作用到了父元素身上

原因:同时满足四条

父元素没有上边框

父元素没有上内间距

父元素没有浮动

子元素没有浮动

清除默认样式

body,p,pre,ul,ol,li,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6
{margin:0;padding:0;}
ul,li,ol,dl,dt,dd{list-style:none;}
a{text-decoration:none}
img{border:0;}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzxxjd.html