盒模型,边框,内外边距,浏览器的默认样式,内联元素的盒模型,display visibility,文档流,浮动

盒子模型:一个盒子分为内容区content 内边距padding 边框border和外边距margin

盒子大小= 内容区+内边距 +边框

边框border:

border-width:10px 20px 30px 40px 分别是上右下左 10上 20左右 30下  10上下 20左右

border-style:solid实线 dotted点状边框 dashed虚线。border-color:设置颜色 这三个属性缺一不可

borer:10px red solid; 可以同时设置四个边框的宽度 边框 颜色,没有顺序要求

也可以分别设置 参数为 -top -bottom -left -right 可以同时设置然后单独设置某个边框

内边距padding:指的是盒子的内容区和边框之间的距离,四个方向,影响可见框的的大小

参数为 -top -bottom -left -right

padding:10px 20px 30px 40px 分别是上右下左 10上 20左右 30下  10上下 20左右

外边距margin:指的是这个盒子和别的盒子之间的距离,不会影响可见框的大小,但是影响盒子的位置

水平方向设置auto盒子居中

垂直外边距重叠,相邻的两个兄弟元素外边距取得是最大值,不是取和

父子元素的垂直外边距如果相邻了,子元素的外边距会传递给父元素

overflow:hidden;解决重叠

清楚浏览器的默认样式:*{padding:0 margin:0}

内联元素的盒模型:内联元素设置不了宽和高 可以设置水平方向的内边距 和边框,垂直方向支持但不影响

布局 外边距只支持水平方向

display:规定元素类型 block把一个行内元素改成块显示 inline把块元素改成行内元素显示

inline-block行内块可以设置宽高也不会独占一行

none 就不显示这个元素并且在页面中也不会继续占有位置

visibility: 规定元素是否可见 hidden不显示这个元素但占有位置

overflow:可以设置父元素如何处理溢出的内容

hidden修剪内容 剪掉的不可见 也能解决父子元素重叠

scroll浏览器会显示滚动条以便查看其余内容 底部右边显示滚动条

auto智能添加滚动条

文档流:网页=文档  每一个网页都是一个文档 网页是一个多层的结构 我们看见的就是最上面的一层文档流是

最基础的一层 创建的元素都默认在文档流中 块元素只有在文档流中才会独占一行宽度默认是父元素的百分之百

高度是由内容撑开。

浮动:float:left;right;脱离文档流 当为一个元素设置浮动后,这个元素或脱离文档流他下边的元素会马上往上移动

只能浮动到父元素的边 通过浮动可以把块元素横着排,如果浮动的元素上边是一个没有浮动的块那么浮动的元素不会超过

上边的块,浮动的元素不会超过上边的兄弟元素 最多平齐

文字绕图: 浮动的元素不会盖着文字 文字会自动环绕

内联元素的浮动:内联元素脱离文档流设置宽高都有效会被内容撑开

你可能感兴趣的:(盒模型,边框,内外边距,浏览器的默认样式,内联元素的盒模型,display visibility,文档流,浮动)