CSS属性设置，盒子模型，网页布局

CSS属性设置

1. 宽和高

width：属性可以为元素设置宽度.

height：属性可以为元素设置高度.

块级标签的宽度不修改的情况下默认占浏览器的一整行，块级标签的高度也是取决于标签内文本的高度，但是可以通过CSS设置

行内标签的宽度和高度都是由内容来决定的，行内标签是无法设置长宽的，即使设置了也无效

2. 颜色属性

color

hex（十六进制色：color: #FFFF00 --> 缩写：#FF0）
rgb（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
rgba（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
hsl（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
hsla（和HSL相似，A表示Alpha透明度，取值0~1之间。）

transparent

全透明，使用方式：color: transparent;

opacity

元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。
filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

3. 字体属性

font-style: 用于规定斜体字体

normal：字体正常显示
italic：字体斜体显示
oblique：字体倾斜显示

font-weight: 设置字体的粗细

normal：默认
bold：粗体
bolder：加粗，相当于<strong>和<b>标签
lighter：更细
100 ~ 900：整百（设置具体更细400=normal，700=bold）
inherit：继承父元素字体的粗细值

font-size: 设置字体的大小

medium：默认值
<absolute-size>"可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用长度值指定文字大小，不允许负值。

font-family：字体名称

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

语法：font：字体大小/行高字体;（字体要在最后）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        .p1 {
            font-weight: bold; /*文字粗细：粗体*/

            font-style: italic; /*文字风格：倾斜（默认正常）*/

            font-size:20px;  /*文字大小：大小值*/

            font-family: "宋体"; /*文字字体：宋体*/
            
            /*一次性设置缩写格式：字体属性简写*/
            font: bolder italic 20px "宋体";       
        }
    </style>
</head>
<body>
<p class="p1">哈哈哈哈哈哈</p>
<p>哈哈哈哈哈2</p>
<p>哈哈哈哈哈3</p>
</body>
</html>

4. 文本属性

white-space: 设置元素中空白的处理方式

normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

ltr：默认，文本方向从左到右。
rtl：文本方向从右到左。

text-align:文本的水平对齐方式

left：默认，向左对齐
center：居中显示
right：向右对齐

line-height:文本行高

normal：默认

vertical-align: 文本所在行高的垂直对齐方式

baseline：默认
sub：垂直对齐文本的下标，和<sub>标签一样的效果
super：垂直对齐文本的上标，和<sup>标签一样的效果
top：对象的顶端与所在容器的顶端对齐
text-top：对象的顶端与所在行文字顶端对齐
middle：元素对象基于基线垂直对齐
bottom：对象的底端与所在行的文字底部对齐
text-bottom：对象的底端与所在行文字的底端对齐

text-indent:文本首行缩进

letter-spacing: 添加字母之间的空白

word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

capitalize：文本中的每个单词以大写字母开头。
uppercase：定义仅有大写字母。
lowercase：定义仅有小写字母。

text-overflow: 文本溢出样式

clip：修剪文本。
ellipsis：显示省略符号...来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。

text-decoration:文本的装饰

none：默认。
underline：下划线。
overline：上划线。
line-through：中线。

text-shadow：文本阴影

text-shadow: 5px 5px 5px #888;

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色

word-wrap：自动换行

word-wrap: break-word;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div套文本</title>
    <style>
        div {
            width: 200px;  /*设置div宽度*/
            height: 200px; /*设置div高度*/
            background-color: green;  /*设置div背景颜色*/
            text-align: center;  /*文本居中显示*/
            direction: rtl;   /*文本方向从右到左*/
            text-decoration: line-through; /*内容中间加中线*/
            text-indent: 10px;  /*首行缩进10px*/
            line-height: 300px; /*设置文本行高*/
            text-shadow:2px 2px 3px #00FF99; /*设置文本阴影*/
            
        }
    </style>
</head>
<body>
<div>
    哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>

5. 背景属性

background-color 背景颜色

background-image 设置图像为背景

url("https://gitee.com/geng-feng/blogimage/raw/master/images/1.jpg"); 图片地址
background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-position 设置背景图像的位置坐标

background-position: center top; 图片中上显示
background-position: center center; 图片置中，x轴center，y轴center
1px -195px 截取图片某部分，分别代表坐标x，y轴

background-repeat 设置背景图像不重复平铺

no-repeat：设置图像不重复，常用
round：自动缩放直到适应并填充满整个容器
space：以相同的间距平铺且填充满整个容器

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

scroll：默认属性
fixed：图片随着页面滚轮移动，容器视觉消失图片消失

background 简写

background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        .box1 {
            width: 500px; /*设置容器宽度*/
            height: 500px;  /*设置容器高度*/
            background-color: red;  /*设置容器背景颜色*/
            background-image: url("img/1.jpg"); /*设置背景图片*/
            /*background-image:linear-gradient(green,blue,yellow,red,black);*/
            background-size: 100px 100px;  /*设置背景图片大小（图片小会重复铺满）*/
            background-repeat: no-repeat;  /*设置图片不重复*/
            background-repeat: repeat-x;  /*只在x轴重复*/
            background-repeat: repeat-y;  /*只在y轴重复*/
            background-position: center top;  /*图片中上显示*/
            background-position: center center; /*图片居中显示*/
            background-position: 80px 200px; /*指定图片坐标显示*/
            background-attachment: fixed;  /*图片随着页面滚轮移动，容器视觉消失图片消失*/

        }
    </style>
</head>
<body>
<div class="box1">
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>测试需延长此标签</p>
</body>
</html>

背景属性演示

参考博客（练习题）：https://www.cnblogs.com/linhaifeng/articles/9011138.html

6. 列表属性

list-style-type: 列表项标志的类型

none：去除标志
decimal-leading-zero：有序列表01
square;：实心方块
circle;：空心圆
upper-alph：大写字母
disc;：实心圆

list-style-position：列表项标志的位置

inside：靠里面显示
outside：靠外面显示

list-style-image：将图象设置为列表项标志

list-style-image: url("img/1.jpg")
需在 list-style-position:inside ;配合下使用

list-style：缩写

list-style: square inside; 方块靠里显示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表属性</title>
    <style>
         ul,ol {
             list-style-type: none; /*去除标志*/
             list-style-type: decimal-leading-zero; /*有序列表：01*/
             list-style-type: square; /*实心方块*/
             list-style-type: circle; /*空心圆*/
             list-style-type: upper-alpha;  /*大写字母*/
             list-style-type: disc;    /*实心圆*/
             list-style-position:outside; /*靠外面显示*/
             list-style-position:inside; /*靠里面显示*/
             list-style-image: url("img/1.jpg"); /*设置图片为标志*/
             list-style: square inside; /*简写格式：方块靠里面显示*/
        }
    </style>
</head>
<body>
    <ul>
        <li>毛毛雨1</li>
        <li>毛毛雨2</li>
        <li>毛毛雨3</li>
        <li>毛毛雨4</li>
        <li>毛毛雨5</li>
    </ul>
    <ol>
        <li>雷阵雨1</li>
        <li>雷阵雨2</li>
        <li>雷阵雨3</li>
        <li>雷阵雨4</li>
        <li>雷阵雨5</li>
    </ol>
</body>
</html>

列表属性演示

7. 边框属性

border-style：边框样式

solid：实线
double：双线
dotted：点状线条
dashed：虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

1个参数：四个角都应用
2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下
4个参数：左上、右上、右下、左下（顺时针）

border: 简写

border:2px yellow solid;

box-shadow：边框阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow: 10px 10px 5px #888;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div{
            width: 800px;
            height: 500px;
            border-style: solid; 边框为实线
            border-style: dotted;  /*设置边框为点状*/
            border-style: dashed;   /*设置边框为虚线*/
            border-style: double; /*设置边框为双线*/
            border-color: #00FF99;  /*设置边框颜色*/
            border-width: thin;     /*边框更细*/
            border-width: thick;    /*加粗*/
            border-width: 5px;  /*自定义粗细*/
            border-radius: 50px; /*边框弧度（四角都应用）*/
            border: 5px #00FF99 solid;/*简写：宽度，颜色，实线*/
            box-shadow: 10px 50px 20px #888; /*边框阴影*/;
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>

头像实现边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头像加边框</title>
    <style>
        .box1{
            border-radius: 50%;
            width: 200px;
            height: 200px;
            background-image: url("/img/1.jpg");
            background-position: top center;
            background-size: 100% 100%;
        }
        img{
            width: 185px;
            border-radius: 50%;
            border: 2px solid deeppink;
            background-position: top center;

        }

    </style>
</head>
<body>

<div class="box1">无边框</div>
<div class="box2">有边框</div>
<img src="../CSS2/img/1.jpg" alt="">
<span></span>

</body>
</html>

实现代码

CSS显示模式：块级别、行内、行内块级

在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素

#1、HTML中容器级与文本级
  容器级标签：可以嵌套其他的所有标签
  div、h、ul>li、ol>li、dl>dt+dd

  文本级标签：只能嵌套文字、图片、超链接
  span、p、buis、strong、em、ins、del

#2、CSS中块级与行内
  块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
  div、h、ul、ol、dl、li、dt、dd  还有标签p

  行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
  span、buis、strong、em、ins、del

  行内块级 img
    
#3、块级元素与行内元素的区别
  1、块级元素block
  特点：独占一行
       可以设置宽高
    若没有设置宽度，那么默认和父元素一样宽
   （比如下例中的div的父元素是body，默认div的宽就是body的宽）
    若没有设置宽高，那么就按照设置的来显示

  2、行内元素inline
       不会独占一行
       不可以设置宽高
           盒子宽高默认和内容一样

  3、行内块级元素inline-block
        不会独占一行
        可以设置宽高

CSS显示模式转换

display：可以控制HTML元素的显示效果

none：不显示。 HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block：显示为块级元素。
inline：显示为内联元素。
inline-block：行内块级元素（会保持块元素的高宽）。
list-item：显示为列表元素。

visibility

visible：元素可见
hidden：元素不可见（可以隐藏某个元素，但仍需占用与未隐藏之前一样的空间。虽然该元素被隐藏了，但仍然会影响布局）
collapse：当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级、行内、行内块级</title>
    <style>
        div {  /*块级验证：设置盒子宽高*/
            width: 200px;
            height: 200px;
        }
        .box1  {
            background-color: red; /*盒子一背景为红色*/
        }
        .box2 {
            background-color: green;/*盒子二背景为绿色*/
            display: none; /*不显示元素*/
            visibility: hidden; /*元素隐藏，但仍占空间*/
            
        }
        span { /*行内验证：即使设置宽高也不会显示*/
            /*width: 200px;*/  
            /*height: 200px;*/
            background-color: blue;
        }
        img { /*行内块级验证*/ 
            width: 100px;
        }
        .box3 { /*行内转块级，行内块级*/
            width: 200px;
            height: 200px;
            background-color: darkblue;
            display: inline-block;  /*行内转行内块级*/
            display: block; /*行内转块级*/
        }
        p { /*验证P标签是块级标签*/
            width: 100px;
            height: 100px;
            background-color: pink;
        }

    </style>
</head>
<body>
<!--块级-->
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
<p>哈哈哈哈</p>
<!--行内-->
<span>你好</span>
<span>我也好</span>
<!--行内块级-->
<img src="img/1.jpg" alt="">
<img src="img/bg1.jpg" alt="">
<span class="box3">盒子三</span>
</body>
</html>

display属性

“无意义”的HTML元素div和span

HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用
它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。
div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制

盒子模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

盒子属性

一个盒子中主要的属性：width、height、padding、border、margin、content。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距（用于控制内容与边框之间的距离）
border：边框（围绕在内边距和内容外的边框，边框有三个要素：像素（粗细）、线型、颜色）
margin：外边距（用于控制元素与元素之间的距离，从视觉角度达到相互隔开的目的）
content: 内容，盒子的内容，显示文本和图像

盒子模型的示意图：

以上属性又分为上、右、下、左四个方向

问题：页面元素的宽度width、高度height如何计算？

答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度

盒模型的层次关系

我们通过一个经典的盒模型3D立体结构图来理解，如图：

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

　　注意：后面跟几个数值表示的意思是不一样的。

值的个数	表达意思
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

box-sizing 属性

content-box；是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box；告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid pink;
            padding: 50px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            padding: 50px;
            /*内边距设置完不影响大小的方式：取消伸缩*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="box">你好啊</div>
<div class="box1">你好啊</div>
</body>
</html>

内边距

外边距（margin）

　　margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，定义了元素与其他相邻元素的距离，这段空白通常不能放置其他内容。

margin-top：上外边距

margin-right：右外边距

margin-bottom：下外边距

margin-left：左外边距

margin：上外边距右外边距下外边距左外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        * {
            margin: 0; /*取消所有默认的外边距*/
            padding: 0; /*取消所有默认的内边距*/
        }
        div{
            width: 200px;
            height: 200px;
        }
        .box1 {
            /*边框：1px粗、实线、红色*/
            border: 1px solid red;
            margin-bottom: 100px; /*与下面边框外边距为100px*/
        }
        .box2 {
            /*边框：1px、虚线、蓝色*/
            border: 1px dashed blue;
            /*与上面边框外边距为200px，谁大就会覆盖谁*/
            margin-top: 200px;
        }
        .box3 {
            border: 1px solid red;
            display: inline-block; /*块级转行内块级*/
            margin-right: 50px;/*与右面边框的外边距为50px*/
        }
        .box4 {
            border: 1px dashed blue;
            display: inline-block;
            /*margin-left: -5px;*/
       /*与左面边框的外边距为50px，（左右或上下的外边距值一样会重合不会累加）*/
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>

<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

外边距

margin-top塌陷问题

控制子盒在父盒内移动采用此类方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决塌陷问题</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            /*border: 1px solid black;*/ /*父盒不加边框*/
            /*控制子盒在父盒内移动用padding*/
            padding-top: 100px ; /*设置上内边距为100px*/
            box-sizing: border-box;

        }
        /*在所有儿子前面加参照物*/
        .father:before {/*不想加框推荐采用此类方式*/
            content: ""; /*添加参照物*/
            display: table;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: blue;
            /*margin-top: 100px;*/ /*内部移动不推荐*/
        }

    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

解决塌陷

水平居中和垂直居中

水平居中包含两种情况：

块级元素的水平居中：margin:0px auto;

文字内容的水平居中：text-align: center;

内容居中显示

让盒子中存储的文字、图片水平居中，用 text-align center；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容在盒子中水平且垂直居中</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*水平居中*/
            text-align: center; /*内容居中*/
            /*垂直居中*/
            line-height: 20px; /*内容行高*/
            padding-top: 60px; /*距离顶部60px*/
            box-sizing: border-box; /*取消盒子拉伸*/
        }
    </style>
</head>
<body>
<div class="box">
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>

内容居中显示

盒子居中显示

如果想让盒子自己相对于父元素水平居中，需要用到 margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子居中显示</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            border: 1px solid black;
            margin: 0 auto;  /*基于body居中显示*/

        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            line-height: 20px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

盒子居中显示

按比例设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按比例设置宽高</title>
    <style>
        p {
            /*width: 800px;*/
            width: 80%; /*按照比例设置宽度*/
            height: 100px;
            background-color: pink;
            margin: 0 auto;

        }
        html,body { /*并集选择器设置父标签高度*/
            height: 100%;  /*高度设置百分之百供子标签参照*/
        }

        div {
            width: 200px; /*设置宽度*/
            height: 80%; /*必须参照父标签设置高度*/
            background-color: blue;
        }
    </style>
</head>
<body>
<p></p>
<div></div>
</body>
</html>

按比例设置宽高

CSS网页布局

float浮动

理解浮动属性首先要搞清楚，什么是文档流？ 文档流：浏览器根据元素在html文档中出现的顺序，元素会自动从左向右，从上到下依次排列

在CSS中，任何元素都可以浮动。浮动的元素会生成一个块级框，而不论它本身是何种元素

关于浮动的两个特点：

1、浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

2、由于浮动框不在文档流中，所以文档流中的块级框表现得就像浮动框不存在一样

ps：浮动元素脱离文档流意味着：无论是什么级的元素都可以设置宽高，且垂直方向没有浮动的元素会自动填充浮动元素在文档流中原先的位置,浮动元素重新归位后就会覆盖该元素

在 CSS 中，我们通过 float 属性实现元素的浮动：

float: 浮动方向(left、right、none);

left：向左浮动
right 向右浮动
none　默认不浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left; /*向左浮动*/
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left; /*向左浮动*/
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: right; /*向右浮动*/
        }
        .box4 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: right; /*向右浮动*/
        }
    </style>
</head>
<body>
<div class="box1">你好</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

浮动演示

浮动元素贴靠问题

当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示
当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素
直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当父元素为body时的贴靠</title>
    <style>
        .box1 {
            width: 100px;
            height: 500px;
            background-color: red;
            float: left;
        }
        .box2 {
            width: 200px;
            height: 400px;
            background-color: green;
            float: left;
        }
        .box3 {
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;

        }
        .box4 {
            width: 400px;
            height: 200px;
            background-color: pink;
            float: left;

        }

    </style>
</head>
<body>
<div class="box1">你好</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

</body>
</html>

足够显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当父元素为设定的div时</title>
    <style>
        .box1 {
            width: 100px;
            height: 500px;
            background-color: red;
            float: left;
        }
        .box2 {
            width: 200px;
            height: 400px;
            background-color: green;
            float: left;
        }
        .box3 {
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;

        }
        .box4 {
            width: 400px;
            height: 200px;
            background-color: pink;
            float: left;

        }
        .father { /*设置父元素的大小*/
            /*这个宽度不足够显示浮动元素，应该合理设置父元素宽度*/
            width: 700px; 
            height: 1200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box1">你好</div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

</body>
</html>

不足够显示

浮动元素的字围现象

没有浮动文字、图片、超链接等元素会给浮动的元素让位置，并围绕在浮动元素的周围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字围现象</title>
    <style>
         img {
                width: 200px;
                float: left; /*向左浮动*/
            }
     </style>
</head>
<body>  

<img src="https://gitee.com/geng-feng/blogimage/raw/master/images/huge.jpg" alt="">
<p>
胡歌，1982年9月20日出生于上海市徐汇区，中国内地影视男演员、流行乐歌手，民盟盟员，毕业于上海戏剧学院表演系。 1996年，14岁的胡歌便成为上海教育电视台的小主持人。2005年在仙侠剧《仙剑奇侠传》中塑造了“李逍遥”一角，并演唱该剧插曲《六月的雨》《逍遥叹》。2006年8月遭受严重车祸，2007年6月复出。2009年主演仙侠剧《仙剑奇侠传三》，并演唱片尾曲《忘记时间》。2010年主演的穿越剧《神话》在央视八套播出。2011年参演历史题材电影《辛亥革命》提名大
众电影百花奖“最佳新人奖”。2012年主演玄幻剧《轩辕剑之天之痕》。2013年主演两部话剧，凭借《如梦之梦》获得北京丹尼国际舞台表演艺术奖“最佳男演员奖”；2014年参演战争剧《四十九日·祭》提名上海电视节白玉兰奖“最佳男配角奖”；2015年主演的谍战剧《伪装者》、古装剧《琅琊榜》、都市剧《大好时光》相继播出，获中国电视剧飞天奖“优秀男演员提名奖”、上海电视节白玉兰奖“最佳男主角奖”、中国电视金鹰奖“观众喜爱的男演员奖”、中国金鹰电视艺术节“最具人气男演员奖”等奖项。2016年登上央视春晚演唱歌曲《相亲相爱》。2017年二度登上央视春晚演 唱歌曲《在此刻》，获得共青团中央“全国向上向善好青年”崇义友善好青年称号，2018年凭借《猎场》二度提名上海电视节白玉兰奖“最佳男主角奖” 。2019年，主演的***亦男执导电影《南方车站的聚会》入围戛纳国际电影节主竞赛单元。2020年12月，2020中国品牌人物500强排名53。
</p>
</body>
</html>

字围现象1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字围现象</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            float: left; /*向左浮动*/
        }
        span {
            /*将行内设置为行内块级*/
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
     </style>
</head>
<body>
<div class="box1"></div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

</body>
</html>

字围现象2

浮动元素的高度问题（父级塌陷）

如果需要两个框在一行显示可以将两个框都设置为浮动框。

但浮动框会带来一个副作用：当父级标签没有定义高度时，会引起父级标签塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父级标签塌陷问题</title>
    <style>
        .header { /*页首居中显示*/
            border: 5px solid black;
            width: 800px;
            /*height: 200px; !*不设置高度就会塌陷*!*/
            margin: 0 auto;
        }
        .logo {   /*logo左显示*/
            width: 200px;
            height: 100px;
            background-color: #ff9019;
            float: left;
        }
        .nav { /*标题右显示*/
            width: 500px;
            height: 100px;
            background-color: #3FFFB7;
            float: right;
        }
        .content { /*内容居中显示*/
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: #FF0E4C;
        }
        .footer { /*页脚居中显示*/
            width: 800px;
            height: 200px;
            margin: 0 auto;
            background-color: #C399FF;
        }
    </style>

</head>
<body>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

父级塌陷问题

父级塌陷不是我们希望的结果，原因在于浮动相当于和父级标签进行了分层，没有浮动时子标签会撑起父标签的高度，但浮动后父标签失去内容填充，于是就塌陷了。

解决父级塌陷的三种方案：

给父级标签设置高度 height: 200px;
ovweflow:hidden
伪元素选择器来消除浮动（常用推荐）

clear 清除浮动

clear这个属性必须设置在块级、并且不浮动的元素中。

须知：元素是从上到下、从左到右依次加载的。

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许左右有浮动对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .header { /*页首居中显示*/
            border: 5px solid black;
            width: 800px;
            margin: 0 auto;
        }
        .header:after{ /*添加伪元素选择器解决塌陷*/
            content: '';
            display: table;
            clear: both; /*清除浮动*/
        }
        .logo {   /*logo左显示*/
            width: 200px;
            height: 100px;
            background-color: #ff9019;
            float: left;
        }
        .nav { /*标题右显示*/
            width: 500px;
            height: 100px;
            background-color: #3FFFB7;
            float: right;
        }
        .content { /*内容居中显示*/
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: #FF0E4C;
            clear: both;
        }
        .footer { /*页脚居中显示*/
            width: 800px;
            height: 200px;
            margin: 0 auto;
            background-color: #C399FF;
        }
    </style>

</head>
<body>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

清除浮动方法

清除浮动的通用方法：

　　在写HTML页面之前，先提前写好处理浮动带来影响的CSS代码

之后只要标签出现了塌陷问题就给该塌陷的标签加一个clearfix属性即可，上述的解决方式是通用的，在哪都一个鸟样，且名字就叫clearfix

网页布局练习：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页布局练习</title>
    <style>
        * {/*取消所有默认的内外边距*/
            margin: 0;
            padding: 0;
        }
        html,body { /*给父级设置高度供子元素参考*/
            height: 100%;
        }
        body {  /*父标签的背景颜色*/
            background-color: #cccccc;
        }
        .header { /*页首：红色居中显示*/
            width: 80%;
            height: 10%;
            background-color: red;
            margin: 0 auto;
            padding: 20px; /*内边距20px*/
            box-sizing: border-box;/*取消拉伸效果*/
        }
        .content {  /*内容：绿色居中显示*/
            width: 80%;
            height: 78%;
            background-color: green;
            margin: 0 auto;
            margin-top: 1%; /*上外边距1%*/
            padding: 20px; /*内边距20px*/
            box-sizing: border-box; /*取消拉伸效果*/
        }
        .footer { /*页脚：蓝色居中显示*/
            width: 80%;
            height: 10%;
            background-color: blue;
            margin: 0 auto;
            margin-top: 1%; /*上外边距1%*/
        }
        .logo {
            width: 20%;
            height: 100%;
            background-color: pink;
            float: left;
        }
        .nav {
            width: 75%;
            height: 100%;
            background-color: yellow;
            float: right;
        }
        .left {
            width: 20%;
            height: 100%;
            background-color: #800080;
            float: left;
        }
        .right {
            width: 75%;
            height: 100%;
            background-color: #87ceeb;
            float: right;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>

</div>
<div class="footer"></div>

</body>
</html>

参考代码

overflow 属性溢出

设置当对象的内容超过其指定高度及宽度时如何显示内容

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

position 定位

static：静态

所有的HTML标签默认都是静态的static，无法改变位置，不能当作绝对定位的参照物，并且设置标签对象的 top、bottom、left 和 right属性是不起作用的
relative：相对定位

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute：绝对定位(常用)

相对于已经定过位的父标签做移动（如果没有父标签就以body为参照），元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。fixed（固定）

注：当你不知道页面其它标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位，就用绝对定位。
fixed：固定定位（常用）

相对于浏览器窗口固定在某个位置。对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .box1 {
            height: 100px;
            width: 200px;
            background-color: #f4ff77;
        }

        .box2 {
            height: 100px;
            width: 200px;
            background-color: #ff6ff1;
            left: 30px;  /*从左往右   如果是负数 方向则相反*/
            top: 30px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }
        .box3 {
            height: 100px;
            width: 200px;
            background-color: #00FF99;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        body{
            margin: o;
        }
        input{
            width: 200px;
            height: 50px;
        }
        input:focus{
            outline: none;
            background-color: #00FF99;
        }
        img {
            height: 50px;
            position: relative;
            top: 20px;
        }
    </style>
</head>
<body>
<input type="text" name="call" placeholder="请输入图片中的验证码">
<img src="2.png" alt="">
</body>
</html>

应用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .box1 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        .box2 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px; /*从左往右*/
            top: 100px;  /*从上往下*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位实现盒子居中显示</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: #7eff99;
            position: relative; /*父级相对定位*/
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: #e46f99;
            /*margin: 0 auto;  !*只能实现水平居中，不能实现垂直居中*!*/
            position: absolute;/*子级绝对定位*/
            left: 50%; /*从左往右*/
            margin-left: -50px; /*左外边距*/
            top: 50%; /*从上往下*/
            margin-top: -50px; /*上外边距*/
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>

定位盒子居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .box1{
            height: 500px;
            background-color: #ff839b
        }
        .box2{
            height: 500px;
            background-color: #ccffa0
        }
        .box3{
            height: 500px;
            background-color: #70ddff
        }
        .box4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;  /*距离浏览器底部10px*/
            right: 20px;  /*距离浏览器右侧20px*/
            height: 100px;
            width: 100px;
            background-color: #ea5aeb; /*背景颜色*/
            border: 2px dotted black; /*添加边框：2px粗、点状线、黑色*/
            border-radius: 50%; /*设置成圆形边框*/
            text-align: center; /*内容居中显示*/
            line-height: 100px; /*内容行高*/
        }
        a{
            text-decoration: none; /*去掉内容的下划线*/
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
    <a href="#">回到顶部</a>
</div>
</body>
</html>

固定定位

脱离文档流：

　　绝对定位

　　固定定位

不脱离文档流：

　　相对定位

z-index 属性

用于指定定位的元素的覆盖关系（设置其层叠顺序），值大的在外层展示

设置元素的层叠顺序：

z-index 值表示谁压着谁，数值大的压盖着数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0。如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁就在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父标签层级低无法展示，子标签层级再高也无法展示

父元素没有z-index值, 那么子元素谁的z-index值大谁盖住谁父元素z-index值不一样, 那么父元素谁的z-index值大谁盖住谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠</title>
    <style>
        .father1 {
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;/*相对定位*/
        }
        .son1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute; /*绝对定位*/
            left: 300px;
            top: 300px;
            z-index: 2; /*子1的值大它就在上面*/
        }

        .father2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .son2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 350px;
            top: 50px;
            z-index: 1; /*子2的值小它就在下面*/
        }
    </style>
</head>
<body>
<div class="father1">
    <div class="son1"></div>
</div>

<div class="father2">
    <div class="son2"></div>
</div>
</body>
</html>

z-index层叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从父现象</title>
    <style>
        .father1 {
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;  /*相对定位*/
            z-index: 1;   /*父1比父2小*/
        }
        .son1 { /*子1被子2压盖着*/
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute; /*绝对定位*/
            left: 300px;
            top: 300px;
            z-index: 2; /*子1比子2大但是仍被压盖着*/
        }

        .father2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative; /*相对定位*/
            z-index: 2; /*父2比父1大*/
        }
        .son2 { /*子2盖住子1*/
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute; /*绝对定位*/
            left: 350px;
            top: 50px;
            z-index: 1; /*子2比子1小但还是在外层*/
        }
    </style>
</head>
<body>
<div class="father1">
    <div class="son1"></div>
</div>

<div class="father2">
    <div class="son2"></div>
</div>
</body>
</html>

从父现象

posted @ 2021-03-05 09:43 山风有耳阅读(577) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

山风有耳

CSS属性设置，盒子模型，网页布局

CSS属性设置

1. 宽和高

2. 颜色属性

color

transparent

opacity

3. 字体属性

font-style: 用于规定斜体字体

font-weight: 设置字体的粗细

font-size: 设置字体的大小

font-family：字体名称

font：简写属性

4. 文本属性

white-space: 设置元素中空白的处理方式

direction: 规定文本的方向

text-align:文本的水平对齐方式

line-height:文本行高

vertical-align: 文本所在行高的垂直对齐方式

text-indent:文本首行缩进

letter-spacing: 添加字母之间的空白

word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

text-overflow: 文本溢出样式

text-decoration:文本的装饰

text-shadow：文本阴影

word-wrap：自动换行

5. 背景属性

background-color 背景颜色

background-image 设置图像为背景

background-position 设置背景图像的位置坐标

background-repeat 设置背景图像不重复平铺

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

参考博客（练习题）：https://www.cnblogs.com/linhaifeng/articles/9011138.html

6. 列表属性

list-style-type: 列表项标志的类型

list-style-position：列表项标志的位置

list-style-image：将图象设置为列表项标志

list-style：缩写

7. 边框属性

border-style：边框样式

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

border: 简写

box-shadow：边框阴影

头像实现边框：

CSS显示模式：块级别、行内、行内块级

CSS显示模式转换

display：可以控制HTML元素的显示效果

visibility

“无意义”的HTML元素div和span

盒子模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

盒子属性

一个盒子中主要的属性：width、height、padding、border、margin、content。如下：

内边距（padding）

box-sizing 属性

外边距（margin）

margin-top塌陷问题

水平居中包含两种情况：

内容居中显示

盒子居中显示

按比例设置宽高

CSS网页布局

float浮动

float: 浮动方向(left、right、none);

浮动元素贴靠问题

浮动元素的字围现象

浮动元素的高度问题（父级塌陷）

clear 清除浮动

overflow 属性溢出

position 定位

static：静态

relative：相对定位

absolute：绝对定位(常用)

fixed：固定定位（常用）

z-index 属性