css样式后续；

发布时间：2020-09-01编辑：dyy阅读（835）

CSS盒子模型（Box Model）

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素；

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

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

当需要设计一个只有250像素的空间，则需要总宽度为250px的元素；width: 220px； padding: 10px; border: 5px solid gray; margin: 0; 总元素宽度=220+10+10+5+5；

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

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

边框样式；border-style属性用来定义边框的样式

border-style:none;	无边框
border-style:dotted;	虚线边框
border-style:dashed;	虚线边框
border-style:solid;	实线边框
border-style:double	双边框
border-style:groove;	凹槽边框
border-style:ridge	垄状边框
border-style:inset	嵌入边框
border-style:outset	外凸边框
border-style:hidden	隐藏边框

边框宽度:border-width 属性为边框指定宽度

为边框指定宽度有两种方法：可以指定长度值，比如 2px，或者使用 3 个关键字之一，它们分别是 thick（粗的）、medium（默认值）和 thin（细的） border-width:5px;

边框颜色:border-color属性用于设置边框的颜色;

name - 指定颜色的名称，如 red;可以根据RGB颜色配色表指定 RGB 值, 如 rgb(255,228,196)，border-color:rgb(255,228,196);；根据指定16进制值border-color:#0000FF；还可以设置边框的颜色为"transparent"（透明的）

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式；

在CSS中，可以指定不同的侧面不同的边框： border-top-style（顶部）； border-right-style（右侧的）；border-bottom-style（底部）；border-left-style应该从父元素继承 overflow 属性的值应该从父元素继承 overflow 属性的值应该从父元素继承 overflow 属性的值应该从父元素继承 overflow 属性的值-style（右侧的）；border-style:dotted（四面的）；

总结：border属性可以样式，宽度，颜色简写；border:5px solid red;

CSS 轮廓（outline）；outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，outline属性指定元素轮廓的样式、颜色和宽度

outline-style:dotted；	虚线边框
outline-style:dashed;	虚线边框
outline-style:solid;	实线边框
{outline-style:double	双边框
outline-style:groove	凹槽边框
outline-style:ridge	垄状边框
outline-style:inset	嵌入边框
{outline-style:outset	外凸边框
border-style:hidden	隐藏边框

CSS outline-color 属性;设置一个虚线轮廓的颜色 outline-color:#00ff00;css outline-width属性：设置轮廓的宽度, outline-width:5px属性也可以定义：outline-width:thin（规定细轮廓），outline-width:medium（默认。规定中等的轮廓），outline-width:thick（规定粗的轮廓），也可以自己定义大小px

CSS margin(外边距)：margin(外边距)属性定义元素周围的空间；

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的，可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性；margin-top:100px;(上边距) margin-bottom:100px;（下边距） margin-right:50px;（右边距） margin-left:50px;左边距；

简写：为了缩短代码，可以使用一个属性中margin指定的所有边距属性

1.margin:25px 50px 75px 100px;(上边距为25px,右边距为50px,下边距为75px,左边距为100px)

2.margin:25px 50px 75px;(上边距为25px,左右边距为50px,下边距为75px)

3.margin:25px 50px;(上下边距为25px,左右边距为50px)

4.margin:25px;(所有的4个边距都是25px)

CSS padding（填充）:定义元素边框与元素内容之间的空间，即上下左右的内边距;padding-top:25px;(上内边距),padding-bottom:25px;(右内边距),padding-right:50px;(下内边距),padding-left:50px;(左内边距);

简写：跟margin属性简写相同；

CSS 分组和嵌套选择器

分组选择器；样式表中有很多具有相同样式的元素

嵌套选择器：适用于选择器内部的选择器的样式

p{ }: 为所有 p 元素指定一个样式；

.marked{ }: 为所有 class="marked" 的元素指定一个样式；

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式；

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式；

CSS 尺寸 (Dimension)；许你控制元素的高度和宽度。同样，它允许你增加行间距；

height属性：设置一个段落的高度和宽度：auto：默认。浏览器会计算出实际的高度

line-height属性：用百分比数值在段落里面设置行高p.small {line-height:90%}

max-height属性：设置段落的最大高度max-height:50px;

max-width属性：设置段落的最大宽度max-width:100px；

min-height属性：设置段落的最低高度 min-height:100px；

min-width属性：置段落的最小宽度min-width:1000px；

CSS Display(显示) 与 Visibility（可见性）：display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏隐藏元素 - display:none或visibility:hidden

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间 h1.hidden {visibility:hidden;}

display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间 h1.hidden {display:none;}

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

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

fixed定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动 position:fixed

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

position:relative；left:-20px;left:20px移动相对定位元素，但它原本所占的空间不会改变

absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> position:absolute；

sticky定位：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换， Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix position: -webkit-sticky; position: sticky;

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条

overflow visible：默认值。内容不会被修剪，会呈现在元素框之外

overflow hidden：内容会被修剪，并且其余内容是不可见的

overflow scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

overflow auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

overflow inherit：应该从父元素继承 overflow 属性的值

CSS 的 Float（浮动：使元素向左或向右移动，其周围的元素也会重新排列；元素的水平方向浮动，意味着元素只能左右移动而不能上下移动，个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动元素之后的元素将围绕它，不会受影响，如果图像是右浮动，下面的文本流将环绕在它左边 float:right