公司建站详细步骤,php网站制作报价,漂亮网站首页 html,一流高职院校建设专题网站CSS盒子模型 五、CSS盒子模型1.CSS长度单位2.元素的显示模式3.总结各元素的显示模式4.修改元素显示模式5.盒子模型的组成6.盒子内容区#xff08;content#xff09;7.关于默认宽度8.盒子内边距#xff08;padding#xff09;9.盒子边框#xff08;border#xff09;10.盒… CSS盒子模型 五、CSS盒子模型1.CSS长度单位2.元素的显示模式3.总结各元素的显示模式4.修改元素显示模式5.盒子模型的组成6.盒子内容区content7.关于默认宽度8.盒子内边距padding9.盒子边框border10.盒子外边距margin10.1 margin注意事项10.2 margin塌陷问题10.3 margin合并问题 11.处理内容溢出12.隐藏元素的方式13.样式的继承14.默认样式15.布局小技巧16.元素之间的空白问题17.行内块的幽灵空白问题 五、CSS盒子模型
1.CSS长度单位
px像素。em相对元素font-size的倍数。rem相对根字体大小html标签就是根。%相对父元素计算。 注意CSS中设置长度必须加单位否则样式无效 2.元素的显示模式 块元素block 又称块级元素 特点 在页面中独占一行不会与任何元素共用一行是从上到下排列的。默认宽度撑满父元素。默认高度由内容撑开。可以通过css设置宽高。 行内元素inline 又称内联元素 特点 在页面中不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列。默认宽度由内容撑开。默认高度由内容撑开。无法通过css设置宽高。 行内块元素inline-block 又称内联块元素 特点 在页面中不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列。默认宽度由内容撑开。默认高度由内容撑开。可以通过css设置宽高。
注意元素早期只分为行内元素、块级元素区分条件也只是一条“是否独占一行”如果按照这种分类方式行内块元素应该算作行内元素。
3.总结各元素的显示模式 块元素block 主体结构标签html、body排版标签h1~h6、hr、p、pre、div列表标签ul、ol、li、dl、dt、dd表格相关标签table、tbody、thead、tfoot、tr、captionform与option 行内元素inline 文本标签br、em、strong、sup、sub、del、insa与label 行内块元素inline-block 图片img单元格td、th表单控件input、textarea、select、button框架标签iframe
4.修改元素显示模式
通过CSS中的display属性可以修改元素的默认显示模式常用值如下
值描述none元素会被隐藏。block元素将作为块级元素显示。inline元素将作为内联元素显示。inline-block元素将作为行内块元素显示。
5.盒子模型的组成
CSS会把所有的HTML元素都看成一个盒子所有的样式也都是基于这个盒子。
margin外边框盒子与外界的距离。border边框盒子的边框。padding内边距紧贴内容的补白区域。content内容元素中的文本或后代元素都是它的内容。
图示如下 盒子的大小content 左右padding border。 注意外边框margin不会影响盒子的大小但会影响盒子的位置。 6.盒子内容区content
值描述属性值width设置内容区域宽度长度max-width设置内容区域的最大宽度长度min-width设置内容区域的最小宽度长度height设置内容区域的高度长度max-height设置内容区域的最大高度长度min-height设置内容区域的最小高度长度 注意 max-width、min-width一般不与width一起使用。 max-height、min-height一般不与height一起使用。 7.关于默认宽度
所谓的默认宽度就是不设置width属性时,元素所呈现出来的宽度。
总宽度父的content-自身的左右margin。
内容区的宽度父的content-自身的左右margin-自身的左右border-自身的左右padding。
8.盒子内边距padding
css属性名功能属性值padding-top上内边距长度padding-right右内边距长度padding-bottom下内边距长度padding-left左内边距长度padding复合属性长度可以设置1~4个值
padding复合属性的使用规则
padding10px四个方向内边距都是10px。padding10px 20px上10px左右20px。上下、左右padding10px 20px 30px上10px左右20px下30px。上、左右、下padding10px上10px右20px下30px左40px。上、右、下、左 注意 padding的值不能为负数。行内元素的左右内边距是没问题的上下内边距不能完美的设置。块级元素、行内块元素四个方向内边距都可以完美设置。 9.盒子边框border
css属性名功能属性值border-style边框线风格复合了四个方向的边框风格none默认值solid实线dashed虚线dotted点线double双实线…border-width边框线宽度复合了四个方向的边框宽度长度默认3pxborder-color边框线颜色复合了四个方向的边框颜色颜色默认黑色border复合属性值没有顺序和数量要求。border-leftborder-left-styleborder-left-widthborder-left-colorborder-rightborder-right-styleborder-right-widthborder-right-colorborder-topborder-top-styleborder-top-widthborder-top-colorborder-bottomborder-bottom-styleborder-bottom-widthborder-bottom-color分别设置各个方向的边框同上 边框相关属性共20个。 border-style、border-width、border-color其实也是复合属性。 10.盒子外边距margin
css属性名功能属性值margin-left左外边距CSS中的长度值margin-right右外边距CSS中的长度值margin-top上外边距CSS中的长度值margin-bottom下外边距CSS中的长度值margin复合属性可以写1~4个值规律同padding顺时针CSS中的长度值
10.1 margin注意事项 子元素的margin是参考父元素的content计算的。因为是父亲的content中承装着子元素上margin、左margin影响自己的位置下margin、右margin影响后面兄弟元素的位置。块级元素、行内块元素均可以完美地设置四个方向得margin但行内元素左右margin可以完美设置上下margin设置无效。margin的值也可以是auto如果给一个块级元素设置左右margin都为auto该块级元素会在父元素中水平居中。margin的值可以是负值。 10.2 margin塌陷问题
什么是margin塌陷
第一个子元素的上margin会作用在父元素上最后一个子元素的下margin会作用在父元素上。
如何解决margin塌陷
方案一给父元素设置不为0的padding。方案二给父元素设置宽度不为0的border。方案三给父元素设置css样式overflow:hidden。
10.3 margin合并问题
什么是margin合并
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并取一个最大的值而不是相加。
如何解决margin塌陷
无需解决布局的时候上下的兄弟元素只给一个设置上下外边距就可以了。
11.处理内容溢出
css属性名功能属性值overflow溢出内容的处理方式visible显示默认值hidden隐藏scroll显示滚动条不论内容是否溢出auto自动显示滚动条内容不溢出不显示overflow-x水平方向溢出内容的处理方式同overflowoverflow-y垂直方向溢出内容的处理方式同overflow 注意 overflow-x、overflow-y 不能一个是hidden一个是visible是实验性属性不建议使用。overflow常用的值是hidden和auto除了能处理溢出的显示方式还可以解决很多疑难杂症。 12.隐藏元素的方式
方式一visibility属性
visibility属性默认值是show如果设置为hidden元素会隐藏。
元素看不见了还占有原来的位置元素的大小依然保持。
方式二display属性
设置displaynone就可以让元素隐藏。
彻底地隐藏不但看不见也不占用任何位置没有大小宽高。
13.样式的继承
有些样式会继承元素如果本身设置了某个样式就使用本身设置的样式但如果本身没有设置某个样式会从父元素开始一级一级继承优先继承离得近的祖先元素。
会继承的css属性
字体属性、文本属性除了vertical-align、文本颜色等。
不会继承的css属性
边框、背景、内边距、外边距、宽高、溢出方式等。 一个规律能继承的属性都是不影响布局的简单说都是和盒子模型没关系的。 14.默认样式
元素一般都有默认得样式例如
a元素下划线、字体颜色、鼠标小手。h1~h6元素文字加粗、文字大小、上下外边距。p元素上下外边距。ul、ol元素左内边距body元素8px外边距4个方向
…
优先级元素的默认样式 继承的样式所以如果要重置元素的默认样式选择器一定要直接选择到该元素。
15.布局小技巧 行内元素、行内块元素可以被父元素当作文本处理。 即可以像处理文本对齐一样去处理行内、行内块在父元素中的对齐。 例如text-align、line-height、text-indent等。 如何让子元素在父亲中水平居中 若子元素为块元素给父元素加上margin:0 auto;。若子元素为行内元素、行内块元素给父元素加上text-align:center;。 如何让子元素在父亲中垂直居中 若子元素为块元素给父元素加上margin-top;值为父元素content➖子元素盒子总高➗2。 若子元素为行内元素、行内块元素 让父元素的heightline-height每个子元素都加上vertical-align:middle; 补充若想绝对垂直居中父元素font-size设置为0。
16.元素之间的空白问题
产生的原因
行内元素、行内块元素彼此之间的换行会被浏览器解析为一个空白字符。
解决方案
方案一去掉换行和空格不推荐。方案二给父元素设置font-size0再给需要显示文字的元素单独设置字体大小推荐。
17.行内块的幽灵空白问题
产生的原因
行内块元素与文本的基线对齐而文本的基线与文本最底端之间是有一定距离的。
解决方案
方案一给行内块设置vertical值不为baseline即可设置为middel、bottom、top均可。方案二若父元素中只有一张图片设置图片为displayblock。方案三给父元素设置font-size0。如果该行内块内部还有文本则需要单独设置font-size。
