手机小说网站建设,精准信息300099,wordpress 点点主题,phpstorm wordpress盒子模型的组成
CSS会把所有的HTML元素都看成一个盒子#xff0c;所有的样式也都是基于这个盒子 content#xff08;内容#xff09;#xff1a;盒子的内容padding#xff08;内边距#xff09;#xff1a;用于控制元素内部与边框之间的距离border#xff08;边框所有的样式也都是基于这个盒子 content内容盒子的内容padding内边距用于控制元素内部与边框之间的距离border边框盒子的边框margin外边距用于控制元素与其他元素之间的距离不影响盒子的大小如果没设置width会影响盒子大小
盒子的大小 content 左右 padding 左右 border
div {/** 背景颜色包括内容区、内边距、 */background-color: red;/** 内容区的高和宽 */width: 200px;height: 200px;/** 内边距 */padding: 10px;/** 盒子边框 */border: red 10px solid;/** margin不影响盒子整体的大小 */margin: 10px;
}content_内容区
属性名功能width / height设置内容区域宽、高度max-width / min-width设置内容区域的最大/小宽度一般不与width一起使用max-height / min-height设置内容区域的最大/小高度一般不与height一起使用
div {min-height: 500px;min-width: 500px;background-color: red;
}默认宽度
所谓的默认宽度就是不设置width属性时元素所呈现出来的宽度
总宽度 父元素content - 自身的左右margin
内容区的宽度 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding
padding_内边距
属性名功能属性值padding-top上内边距长度padding-right右内边距长度padding-bottom 下内边距长度padding-left左内边距长度padding复合属性长度可以设置 1 ~ 4 个值
padding复合属性的使用规则
padding : 10px; 四个方向内边距都是10pxpadding : 10px 20px; 上 10px 左右 20px上下、左右padding : 10px 20px 30px; 上 10px 左右 20px 下 30px上、左右、下padding : 10px 20px 30px 40px; 上 10px 右 20px 下 30px 左 40px上、右、下、左 div {width: 400px;height: 400px;background-color: red;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;}注意
padding的值不能为负数行内元素的上下内边距不能完美设置左右内边距可以会导致元素覆盖块级元素、行内块元素四个方向内边距都可以完美设置
border_边框
属性名功能属性值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分别设置各个方向的边框left、right、top、bottom是各个方向的复合属性同上border-radius边框圆角
div {width: 400px;height: 400px;background-color: red;/** border-left: blue 10px solid; */border-left-width: 10px;border-color: blue;border-style: solid;border-radius: 40px
}margin_外边距
属性名功能margin-left 左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距margin复合属性可以写 1~4 个值规律同padding顺时针
注意
子元素的margin是参考父元素的content计算的设置上、左的margin影响自己的位置下、右margin影响后面兄弟元素的位置块级元素、行内块元素均可以完美地设置四个方向的margin行内元素可以完美设置左右margin上下margin设置无效margin的值也可以是auto如果给一个块级元素设置左右margin都为auto该块级元素会在父元素中水平居中margin的值可以是负值没有直接设置 margin 属性时浏览器会默认应用一些样式规则 style.outer {width: 400px;height: 400px;padding: 50px;background-color: orangered;}.inner {width: 100px;height: 100px;background-color: blue;margin: auto;}/stylediv classouterdiv classinner/div
/divmargin塌陷问题
什么是 margin 塌陷
第一个子元素的上margin会作用在父元素上最后一个子元素的下margin会作用在父元素上也就是被父元素吃掉了这个属于历史遗留问题
如何解决 margin 塌陷
给父元素设置不为0的padding给父元素设置宽度不为0的border给父元素设置css样式overflow:hidden style.outer {width: 400px;background-color: gray;overflow: hidden;}.inner {width: 100px;height: 100px;}.inner1 {background-color: red;margin-top: 50px;}.inner2 {background-color: orange;margin-bottom: 50px;}/stylediv classouterdiv classinner inner1/divdiv classinner inner2/div
/div
div测试/divmargin合并问题
什么是margin合并
上面元素的下外边距和下面兄弟元素的上外边距会合并取一个最大的值而不是相加 如何解决margin塌陷
上下两个元素设置上或下外边距就可以了或者使用float style.box1 {width: 200px;height: 200px;background-color: red;margin-bottom: 50px;}.box2 {width: 200px;height: 200px;background-color: blue;margin-top: 60px;}/stylediv classbox1/div
div classbox2/div处理内容溢出
属性名功能属性值overflow溢出内容的处理方式visible显示默认值hidden隐藏scroll显示滚动条不论内容是否溢出auto内容时显示滚动条不溢出不显示overflow-x水平方向溢出内容的处理方式同overflowoverflow-y垂直方向溢出内容的处理方式同overflow style.outer {width: 400px;height: 200px;background-color: blue;overflow: hidden;}.inner {width: 1000px;background-color: red;}/stylediv classouterLorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, iste pariatur? Esse impedit iurenobis officia voluptates! Adipisci alias amet at doloremque error et magnam maiores minima, nemo neque perferendis,div classinnerLorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti, dicta distinctio dolorem ducimus eius fuga hic iste maxime, nam porro praesentium quam, sunt tempora voluptas. Ad, consequuntur cumque dicta, dolorem eos esse impedit iusto libero magni nam natus nisi nostrum nulla obcaecati optio, pariatur quas quisquam quos repudiandae tempora./divfacilis illum nihil omnis quidem temporibus. Alias ducimus pariatur ratione repudiandae, sunt tempore voluptatem. Eaeaque eveniet fuga nulla pariatur. Accusamus at expedita laborum nam natus odio officia perspiciatis quam quibusdam
/div注意
overflow-x、overflow-y不能一个是hidden一个是visible这两个属于实验性属性不建议使用overflow常用的值是hidden、auto除了能处理溢出的显示方式还可以解决很多疑难杂症
隐藏元素
属性属性值visibilityvisible显示元素默认值hidden隐藏元素但会占有原来的位置displaynone隐藏元素且不占位 style.box1 {width: 200px;height: 200px;background-color: blue;/*visibility: hidden;*/display: none;}.box2 {width: 200px;height: 200px;background-color: red;}/stylediv classbox1/div
div classbox2/div继承样式 元素如果本身设置了某个样式就使用本身设置的样式。本身没有设置样式会从父元素开始一级一级继承。但继承的样式优先级是最低的。 能继承的属性都是不影响布局的简单说都是和盒子模型没关系的 支持继承的属性字体属性、文本属性除了vertical-align、文字颜色等
不支持继承的属性边框、背景、内边距、外边距、宽高、溢出方式等
默认样式
元素一般都些默认的样式如
a下划线、字体颜色、鼠标小手h1 ~ h6文字加粗、文字大小、上下外边距。p元素上下外边距ul、ol左内边距body有8px外边距4个方向
优先级元素的默认样式 继承的样式
布局小技巧
行内元素、行内块元素可以被父元素当做文本处理如 text-align 、 line-height 、 text-indent 等
如何让子元素在父元素中水平居中在子元素加margin: (父元素content 子元素盒子总高) / 2 auto; style.outer {width: 400px;height: 400px;background-color: blue;overflow: hidden;}.inner {width: 200px;height: 100px;background-color: red;margin: 150px auto;text-align: center;line-height: 100px;}/stylediv classouterdiv classinner居中/div
/div当子元素为行内元素、行内块元素给父元素加上text-align:center和line-height style.outer {width: 400px;height: 400px;background-color: blue;text-align: center;line-height: 400px;}.inner {background-color: red;font-size: 20px;text-align: center;}/stylediv classouterspan classinner居中/span
/div如何让子元素在父亲中垂直居中
子元素为行内元素、行内块元素让父元素的 height line-height 每个子元素都加上 vertical- align:middle;若想绝对垂直居中父元素font-size设置为0 style.box {width: 400px;height: 400px;background-color: gray;text-align: center;line-height: 400px;font-size: 0;}img {vertical-align: middle;}span {background-color: red;vertical-align: middle;font-size: 20px;}/stylediv classboxspan你好/spanimg src./images/3.png
/div元素之间的空白问题
**产生的原因**行内元素、行内块元素彼此之间的换行会被浏览器解析为一个空白字符
**解决方案**给父元素设置font-size:0再给需要显示文字的元素单独设置字体大小 stylediv {height: 200px;background-color: darkgreen;font-size: 0;}.d1 {background-color: blue;}.d2 {background-color: red;}.d3 {background-color: chocolate;}span {font-size: 20px;}/styledivspan classd1韩信/spanspan classd2李白/spanspan classd3露娜/span
/div行内块的幽灵空白问题
**产生原因**行内块元素与文本的基线对齐而文本的基线与文本最底端之间是有一定距离的 stylediv {width: 600px;background-color: red;}img{height: 200px;vertical-align: bottom;}/styledivimg src001.jpegx
/div解决方案
方案一 给行行内块设置vertical-align值不为baseline即可设置为middel、bottom、top均可方案二 若父元素中只有一张图片设置图片为块元素display:block方案三 给父元素设置font-size:0如果该行内块内部还有文本则需单独设置font- size
