三小时学会css（菜鸟教程精华版）【中】

百科大全

更新时间：2025-10-05 05:22:4055

admin管理员组
文章数量:1794759

三小时学会css（菜鸟教程精华版）【中】

三小时学会css

上期传送门 CSS 盒子模型(Box Model) CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。盒子模型(Box Model)：

Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为300px： 300px (宽)

50px (左 + 右填充)
50px (左 + 右边框)
50px (左 + 右边距) = 450px

div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS 边框 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。边框样式 border-style属性用来定义边框的样式 border-style 值: 边框宽度可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，不同用户设置数值可以不一样

边框颜色 border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000"

还可以设置边框的颜色为"transparent"（透明）注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

边框-单独设置各边

p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }

上面的例子也可以设置一个单一属性：

border-style:dotted solid; border-style：属性1，属性2，属性3，属性4 上->右->下->左 border-style：属性1，属性2，属性3 上->左右->下 border-style：属性1，属性2 上下->左右 border-style：属性1 上下左右属性相同

边框-简写属性可以在"border"属性中设置：

border-width border-style (required) border-color border:5px solid red;

CSS 轮廓 outline是不占空间的，既不会增加额外的width或者height CSS margin(外边距) Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Margin - 简写属性同上边框顺序 margin属性可以有一到四个值。

margin:100px 50px;

CSS padding（填充）当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。

填充- 单边内边距属性

p.padding { padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; }

填充 - 简写属性同上

padding:25px 50px;

CSS 分组和嵌套选择器在样式表中有很多具有相同样式的元素。

h1 { color:green; } h2 { color:green; } p { color:green; }

为了尽量减少代码，你可以使用分组选择器。每个选择器用逗号分隔。在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p { color:green; }

嵌套选择器它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。 .marked{ }: 为所有 class="marked" 的元素指定一个样式。 .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。 p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>永恒之蓝</title> <style> p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; } </style> </head> <body> <p>这个段落是蓝色文本，居中对齐。</p> <div class="marked"> <p>这个段落不是蓝色文本。</p> </div> <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p> <p class="marked">带下划线的 p 段落。</p> </body> </html>

CSS 尺寸 (Dimension) CSS Display(显示) 与 Visibility（可见性） display属性设置一个元素应如何显示 visibility属性指定一个元素应可见还是隐藏隐藏一个元素可以通过把 display属性设置为"none"，或把visibility属性设置为"hidden"。这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间，不会影响布局。

h1.hidden {display:none;}

块级元素(block)特性：

总是独占一行宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素 (根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block -- 显示为块级元素 display:inline -- 显示为内联元素 display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

CSS Position(定位) position 属性指定了元素的定位类型。

position 属性的五个值：

static relative fixed absolute sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

p.pos_fixed { position:fixed; top:30px; right:5px; }

relative 定位相对定位元素的定位是相对其正常位置。

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

相对定位元素经常被用来作为绝对定位元素的容器块。

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

h2 { position:absolute; left:100px; top:150px; }

sticky 定位（粘贴定位） position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 z-index属性指定了一个元素的堆叠顺序（显示的优先级）一个元素可以有正数或负数的堆叠顺序

img { position:absolute; left:0px; top:0px; z-index:-1;（数越小越在后面） }

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面 CSS 布局 - Overflow 默认情况下，overflow 的值为 visible，意思是多出的内容会溢出元素框 CSS Float(浮动) CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列（让开地方） Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素浮动元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止浮动元素之后的元素将围绕它。如果图像是右浮动，文本流将环绕在它左边

img { float:right; }

清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：

.text_line { clear:both; }

尝试理解一个简单页面：

CSS 布局 - 水平 & 垂直对齐

元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto; 文本居中对齐如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center; 左右对齐 - 使用定位方式我们可以使用 position: absolute; 属性来对齐元素左右对齐 - 使用 float 方式垂直居中对齐 - 使用 padding 如果要水平和垂直都居中，可以使用 padding 和 text-align: center: 垂直居中 - 使用 line-height 垂直居中 - 使用 position 和 transform 除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中

三小时学会css（菜鸟教程精华版）【上】三小时学会css（菜鸟教程精华版）【下】

本文标签：菜鸟精华版小时教程 css

版权声明：本文标题：三小时学会css（菜鸟教程精华版）【中】内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1687027295a129430.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。