CSS（二）、盒模型

最新推荐文章于 2024-08-21 11:04:16 发布

万人之英

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量60

点赞数

分类专栏： HTML+CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/wsz123456wsz/article/details/127018146

版权

HTML+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第二章：盒模型：

2.1、标准盒子模型：content+padding+border+margin

1、盒模型：
content：内容
border:边框（设置边框的宽窄、样式和颜色）
padding:内边距（设置盒子内容区与边框的间距）
margin：外边距（设置盒子与相邻元素的间距）
规则：
2、外边距叠加：box垂直方向上的外边距会叠加：上下格子的外边距相遇时，它们会相互叠加，直至一个外边距碰到另一个元素的边框。（叠加的只是垂直外边距，水平外边距不叠加）
3、盒子width：
- 没有宽度（就是没有涉及width）的元素始终会扩展到填满其父元素的宽度位置。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距和
- 为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性只是内容区的宽度，而非盒子要占据的水平宽度
4、float浮动：主要为实现文本绕排图片的效果
- 文本绕排图片：当浮动一张图片或者其他元素时，你是在要求浏览器往它上方推，直到它碰到父元素的内边界。后面的段落不再认为浮动元素在文档流中位于它的前面，因而它会占据父元素左上角的位置。不过，它的内容（文本）会绕开浮动的图片
- 创建分栏：再给img设置float后，再给段落设定宽度，然后再flaot它，便可创建多栏（浮动图片的固定段落一经浮动，就会变成布局中的一栏，其分本也不会再绕排图片）
5、促使父元素围住浮动元素的三种方法
- 为父元素添加overflow:hidden,强制父元素包含浮动元素
- 浮动父元素
- 给父元素的最后添加一个非浮动的子元素，然后清除该子元素

<html>
    <head>
        <title></title>
        <style>
            section {border:1px solid blue;} 
            img {float:left;} 
            .clear_me {clear:left;} 
            footer {border:1px solid red;}
        </style>
    </head>
    <body>
        <section> 
            <img src="images/rubber_duck.jpg"> 
            <p>It's fun to float.</p> 
            <!--最后添加的非浮动子元素-->
            <div class="clear_me"></div> 
        </section> 
        <footer> Here is the footer element…</footer> 
    </body>
</html>

定位(position)：
6、静态定位：在静态定位的情况下，每个元素在处在常规文档流中。它们都是块级元素，所以就会在页面中自上而下地堆叠起来
7、相对定位（relative):相当的是它原来在文档流中的位置（或者默认位置），接下来可以使用top、right、bottom和left属性来改变它的位置
8、绝对定位（absolute):绝对定位跟静态定位和相对定位比，很不一样。因为绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素body元素在定位
- 由于绝对定位元素的定位上下文是body，所以在页面滚动的时候，为了维护与body元素的相对位置关系，它也会相应地移动
9、固定定位（fixed):固定定位的定位上下文是视口（浏览窗口或手持设备的屏幕），因此它不会随页面滚动而移动
只有将元素的position属性设置为relative、absolute或fixed，这个元素的top、right、bottom和left属性才会起作用
显示属性（display)：
10、块级元素和行内元素
- 块级元素：比如段落、标题、列表等，在浏览器中上下堆叠显示
- 行内元素：比如a、span和img，在浏览器中左右并排显示，只有前一行没有空间时才会显示到下一行
- 将块级元素(block)和行内元素(inline)互换

/*默认为 block*/ 
p {display:inline;} 
/*默认为 inline*/ 
a {display:block;}

11、display属性的none值：把元素的display设定为none，该元素以及所有包含在其中的元素，都不会在页面中显示，它们原先占据的所有空间都会被“回收”
12、visibility属性：这个属性最常用的两个相对的值是visible和hidden，把该属性设置为hidden时，元素会隐藏，但它站占据的页面空间仍“虚位以待”
背景（background)
13、一些背景属性：
background-color
background-image:默认情况下，背景图片会以元素左上角为起点，沿水平和垂直方向上重复出现，最终填满整个背景区域
background-repeat:
- 默认值是repeat，效果是水平和垂直方向上都重复；
- repeat-x:只在水平方向上重复；
- repeat-y：只在垂直方向上重复；
- no-repeat:不重复
- round:为确保图片不被剪切，通过调整图片大小来适应背景区域
- space:为确保图片不被剪切，通过在图片间添加空白来适应背景区域
background-position:该属性有五个关键值：top、left、bottom、right和center。这些关键值中的任意两个组合起来都可以作为该属性的值
background-size:
- 50%:缩放图片，使其填充背景区的一半。
- 100px 50px：把图片调整到 100 像素宽，50 像素高。
- cover：拉大图片，使其完全填满背景区；保持宽高比。
- contain：缩放图片，使其恰好适合背景区；保持宽高比。
background-attachment(背景粘附)：控制滚动元素内的背景图片是否随元素滚动而滚动
- scroll:默认值，即背景图片随元素移动
- fixed：背景图片不会随着元素移动而移动(常用于给body元素中心位置添加淡色水印，让水印不会随页面滚动而移动)
14、css3新增背景属性
- background-clip:控制背景绘制区域的范围，比如可以让背景颜色和背景图片只出现在内容区，而不出现在内边距区域。默认情况下，背景绘制区域是扩展到边框外边界的
- background-origin:控制背景定位区域的原点
- background-break:控制分离元素（比如跨越多行的行内盒子）的显示效果
15、背景渐变
线性渐变：linear-gradient()
放射性渐变：radial-gradient()