11、前端开发:CSS知识总结——盒子模型(Box Model)(2)

简介: 11、前端开发:CSS知识总结——盒子模型(Box Model)(2)

1. 水平布局


子元素在其父元素中水平方向的位置由以下几个属性共同决定:

1.gif


水平方向的七个值相加必须等于其父元素内容区的宽度;如果不等于,那么浏览器就会自动调整七个值中的某个值,让其成立,这就叫过度约束 。


如何调整:


1、七个值中如果没有auto,浏览器默认调整margin-right。


2、七个值中如果有auto,浏览器会调整auto;可设置auto有:margin-left,width,margin-right


       (1)1个auto,谁是调谁;


       (2)2个auto,有width调width,无width平分


       总结   width>margin


       例  margin:0 auto;居中显示

2、overflow属性

默认情况下,父元素的高度是被子元素撑开的,若父元素设置了,设置多少是多少。


子元素在父元素的内容区中排列的


如果子元素的大小超过了父元素,则子元素会从父元素中溢出,这个时候就要用overflow属性了


使用overflow属性设置父元素如何处理溢出?


       可选值:


       visble  默认值  子元素会从从父元素中溢出


       hidden  溢出内容被裁剪不会显示


       scroll  生成两个滚动条,通过其查看完整内容


       auto  根据需要生成滚动条


3、CSS垂直外边距重叠

(1)兄弟元素


如果都是正值,谁大听谁;


如果一正一负,两者相加之和;


如果都是负值,谁小听谁。


(2)父子元素


垂直外边距重叠是发生在处于文档流的父子元素;当父元素和子元素的外边距相邻时,


如果设置子元素外边距,就会传递到父元素,从而导致页面布局混乱


<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            .block1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }
            .block2{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                margin-top: 100px;
            }
        </style>
    </head>
    <body>
        <div class="block1">
            <div class="block2"></div>
        </div>
    </body>
</html>


2.png

解决方案


1.使子元素开启BFC属性:overflow:非visible的值


2.隔离父子元素的外边距,用边框


    <body>
        <div class="block1">
            <table></table>
            <div class="block2"></div>
        </div>
    </body>

这样的方法并不是最完美的,通过CSS的伪元素,可以不用在html中添加多余的结构


block1:before{
    display: table;
    content: "";
}


相关文章
|
21天前
|
前端开发
前端 CSS 经典:元素倒影
前端 CSS 经典:元素倒影
10 1
|
21天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
20 0
|
21天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
22 0
|
21天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
12 0
|
21天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
13 0
|
21天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
17 0
|
21天前
|
前端开发
前端 CSS 经典:鼠标位置信息
前端 CSS 经典:鼠标位置信息
14 0
|
21天前
|
前端开发 JavaScript
前端 CSS 经典:文字描边
前端 CSS 经典:文字描边
11 0
|
21天前
|
前端开发
前端 CSS 经典:mix-blend-mode 属性
前端 CSS 经典:mix-blend-mode 属性
12 0
|
21天前
|
前端开发
前端 CSS 经典:backface-visibility 属性
前端 CSS 经典:backface-visibility 属性
14 0