首页 > 其他分享 >CSS

CSS

时间：2024-10-31 14:47:26浏览次数：3  
标签：color 元素 边框 width background border CSS

css

简介

CSS就是cascading style sheet的缩写，中文译作“层叠样式表”或者“级联样式表”，适用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译，可以直接由浏览器执行（属于浏览器解释型语言），是web网页开发技术的重要组成部分。

CSS的好处

  • 使用CSS样式可以有效地对页面进行布局，更加灵活多样。
  • 使用CSS样式可以对页面字体、颜色、背景和其他效果实现精准控制，同时对他们的修改和控制变得更加快捷，更加强大。
  • 站点中所有的网页风格都使用一个CSS文件进行统一控制，达到一改全改。还可以快速切换主题，我们可以把HTML比作是一个骨架，CSS是衣服。同一个HTML骨架结构，不同CSS样式，所得到的的美化布局效果不同。
  • CSS可以支持多种设备，比如手机，PDA，打印机，电视机，游戏机等
  • CSS可以将网页的表现与结构分离，使页面载入更快，更利于维护，这也是我们的最终目的。

CSS核心

CSS的核心：查找标签 + 渲染布局

CSS基本语法

selector {property : value;}
 选择器      属性      值

CSS的基本语法由选择器，属性，属性的值组成，如果选择符有多个属性，由分号隔开。
注意：这里的代码都是英文格式，例如花括号、冒号和分号

CSS嵌套原则

块级标签可以嵌套块级标签和内联标签

内联标签和以嵌套内联标签，不可以嵌套块级标签

1.1 CSS的引入方式

CSS样式有三种不同的使用方式，分别是行内样式，嵌套样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式

- 行内样式

行内样式：就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。

<p style="color: red;background-color: #369;text-align: center">hello</p>

- 嵌入式

嵌入式，是把CSS样式卸载HTML文档内的head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文件需要特殊，单独的样式时，可以使用内部样式表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            color: red;
            background-color: #336699;
            text-align: center;
        }
    </style>

</head>
<body>

<div>嵌入式</div>

</body>
</html>

- 链接式

链接式，就是把CSS样式写在HTML文档的外部，一个后缀为.CSS的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表时最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="common.css">

</head>
<body>

<div>链接式</div>

</body>
</html>

1.2 CSS选择器

1.2.1 基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #q1{
            color: red;
        }
        .c1{
            color: pink;
        }
        .c2{
            font-size: 32px;
        }
    </style>

</head>
<body>

<div id="q1">item1</div>
<div id="q2">item2</div>
<div id="q3">item3</div>

<div class="c1 c2">item4</div>
<div class="c1">tiem5</div>
<div class="c1">tiem6</div>

</body>
</html>

1.2.2 组合选择器

几种组合选择器

后代选择器
	使用空格表示
	表示一个标签包含的所有下级标签都可以称为后代选择器，可以看做，父亲下面可以是儿子，孙子等

子代选择器
	使用 > 表示
	只表示标签的下一级标签，称为自带选择器，相当于父亲和儿子之间的关系

毗(pi)邻选择器
	使用+(加号)表示
	标签的下一个并且紧挨着的标签，不表示上一个 CSS只能往下走，不能往上走

普通兄弟选择器
	使用~(破折号)表示
	标签同级的其他标签

属性选择器
	使用[](中括号)表示
	可以使用正则

或且选择器
	或（或者）选择器使用逗号（,）表示
	切（并且）选择器使用(.)点表示

选择器可以相互组合使用，代码只能往下走不能往上走

  • 后代子代选择器

空格 代表后代选择器，后代选择器可以是多重关系
.c1 .c2{ color:red;} ：
表示.c1的后代选择器c2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器*/
        .c1 .c2{
            color:red;
        }

        /*子代选择器*/
        .c3 .c5{
            color: red;
        }
        .c3 > .c5{
            color: lime;
        }
        .c3 .c4 .c5{
            color: rebeccapurple;
        }

    </style>

</head>
<body>

<!--后代选择器-->
<div class="c1">
    <div class="c2"> 后代选择器1 </div>
</div>

<div class="c2"> 后代选择器2 </div>

<!--子代选择器-->
<div class="c3">
    <div class="c4">
        <div class="c5">item3</div>
    </div>
    <div class="c5">item4</div>
</div>

</body>
</html>

  • 或且选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*(.)且择器*/
        div.c1{       /*是div标签并且还是c1的标签*/
            color: red;
        }

        /*或选择器*/
        p.c1,#l1{   /*是p标签并且是c1的class，或者id等于l1的标签*/
            color: lime;
        }

    </style>

</head>
<body>

<!--与选择器-->
<div class="c1"> item1 </div>
<p class="c1"> item2 </p>
<div>item3</div>
<p id="l1">item4</p>

</body>
</html>

  • 兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*毗邻选择器*/
        #i1 + div{
            color: red;
        }

        /*兄弟选择器*/
        #i1 ~ div.c2{
            color: magenta;
        }
        .c3 ~ div{
            color: aqua;
        }
    </style>

</head>
<body>

<p id="i1">itme0</p>
<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>

</body>
</html>

1.2.3、属性选择器

格式

E[att] 		
		匹配所有具有att属性的E元素，不考虑它的值。			
		（注意：E在此处可以省略。比如“[cheacked]”。以下同。） 
		p[title] { color:#f00; }
			   
E[att=val] 
		匹配所有att属性等于“val”的E元素 
		div[class=”error”] {color:#f00; }
		
E[att~=val] 
		匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
		td[class~=”name”] { color:#f00; }
		
E[attr^=val] 
		匹配属性值以指定值开头的每个元素
		div[class^="test"]{background:#ffff00;}
		
E[attr$=val] 
		匹配属性值以指定值结尾的每个元素 
		div[class$="test"] {background:#ffff00;}
		
E[attr*=val] 
		匹配属性值中包含指定值的每个元素 
		div[class*="test"] {background:#ffff00;}

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*属性选择器*/

        /*给input标签中，type为password的标签设置样式*/
        input[type="password"]{
            border: 1px solid blue;
        }

        /*按照属性进行查找标签*/
        [type="text"]{      
            border: 1px solid red;  /*给文本框加上颜色，设置像素*/
        }

        /*给属性为index的内容设置样式*/
        [index]{
            font-size: 32px;
            font-style: italic;
        }

        /*给以png结尾的设置字体颜色*/
        [href$="png"]{
            color: red
        }

    </style>

</head>
<body>

<input type="text">
<input type="password">

<div index="1">1</div>
<div index="2">2</div>
<div index="3">3</div>

<ul>
    <li><a href="1.png">item1</a></li>
    <li><a href="2.jpg">item2</a></li>
    <li><a href="3.jpg">item3</a></li>
    <li><a href="4.png">item4</a></li>
    <li><a href="5.gif">item5</a></li>

</ul>

</body>
</html>

1.2.4、伪类选择器

- anchor伪类：专用于控制连接的显示效果

:link a:link 选择所有未被访问的链接
:visited a:visited 选择所有已被访问的链接
:active a:active 选择活动链接
:hover a:hover 选择鼠标指针位于其上的链接。

注意

在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。
在CSS定义中，a:active必须被置于a:hover之后，才是有效的
伪类的名称不区分大小写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        a:link{
            color: red
        }
        a:visited{
            color: black;
        }
        a:hover{
            color: lime;
        }
        a:active{
            color:blue;
        }

    </style>
</head>
<body>
<p>将鼠标指针移动到这个链接上：<a href="http://www.w3school.com.cn">w3school.com.cn</a></p>
</body>
</html>

:hover

:visited

:active

- before after伪类

:first-child p:first-child 选择属于父元素的第一个子元素的每个元素
:last-child p:last-child 选择属性其父元素最后一个子元素每个元素
:before p:before 在每个元素的内容之前插入内容
:after p:after 在每个元素的内容之后插入内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*选择属于父元素的第一个子元素的每一个元素*/
        .c1 div:first-child{
            color: red;
        }

        /*选择属于其父元素最后一个子元素的每个元素*/
        .c1>:last-child{
            color: magenta;
        }
        /*在每个元素的内容之前插入内容*/
        a:before{
            content: "连接地址：";
            color: red;
            display: block;
        }
        /*在每个元素的内容之后插入内容*/
        p#i1:after{
            content: 'hello';
            color: red;
            display: block;
        }

    </style>
</head>
<body>

<div class="c1">
    <div>item0
        <p>itme1</p>
        <p>itme1-1</p>
        <p>itme1-2</p>
    </div>

    <p>item2</p>
    <div>teem3</div>
    <p>item4</p>
</div>

<a href="">www.baidu.com</a>
<p id="i1">p标签</p>

</body>
</html>

1.2.5 样式继承

CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后HTML元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的族谱。

在上图中，可以看到，body的子元素有三个，h1、p和ul也有几个子元素，那么li和a就是body的后代元素。有时可能我们在body里面设置了一些属性，结果，body下面所有的后代元素都可能享受到，这就是样式继承。样式继承，可以给我们的网页布局带来很多的便利，让我们的代码变得更加整洁。但是，如果不了解，或者使用不当，也有可能会给我们带来很多不必要的麻烦。

文本相关属性
font-family font-size letter-spacing line-height
font-style font-variant text-align text-indent
font-weight font text-transform word-spacing
color direction
列表相关属性
list-style-image list-style-position list-style-type list-style
表格和其他相关属性
border-collapse border-spacing caption-side empty-cells
cursor

1.2.6 选择器优先级

  • 1.继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，他允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的颜色值也会应用到段落的文本中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            color: red;
        }
    </style>
    
</head>
<body>
<p>hello</p>
</body>
</html>

这段文字都继承了body{color:red;} 样式定义的颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            color: red;
        }
        p{
            color: blue;
        }
    </style>

</head>
<body>
<p>hello</p>
</body>
</html>

发现只需要给加个颜色就能覆盖掉它继承的样式颜色。由此可见：任何显示申明的规则都可以覆盖其集成样式。

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也有限制的。有一些属性不能被继承，如：border，margin，passing，background等。

  • 2.优先级
    所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重，他的基本规则是：

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 浏览器默认属性

0 最高权重，比任何优先级都高  !important		一般用于测试

1 内联样式表的权值最高		style=""		1000;

2 统计选择符中的ID属性个数		#id			100

3 统计选择符中的CLASS属性个数	.class		10

4 统计选择符中的HTML标签名个数	标签名		1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*权重：10*/
        .c1{
            color: red;
        }
        /*权重100*/
        #i1{
            color: blue;
        }
        /*权重1*/
        div{
            color: orange;
        }
        /*权重21*/
        .c2 .c4 span{
            color: brown;
        }
        /*权重30*/
        .c2 .c3 .c5{
            color: aqua;
        }
        /*权重30，后来居上*/
        .c2 .c3 .c5{
            color: chartreuse;
        }
    </style>

</head>
<body>

<div class="c1" id="i1">item1</div>

<div class="c2">
    <div class="c3">
        <div class="c4">
            <span class="c5">item2</span>
        </div>
    </div>
</div>

</body>
</html>

1.有!important声明的规则高于一切
2.如果!important声明冲突，则比较优先权
3.如果优先权一样，则按照在源代码中出现的顺序决定，后来者居上
4.由继承而得到的样式没有specificity的就是你，它低于其他一切规则（比如全局定义选择符*定义的规则）
5.用数字表示只是说明思想，一万个class也不如一个id权重高

1.3 CSS的属性操作

1.3.1 文本属性

  • font-style（字体样式风格）
属性值：
normal：设置字体样式为整体。默认值
italic：设置字体样式为斜体。这是选择字体库中的斜体字
oblique：设置字体样式为斜体。人为的使用文字倾斜，而不是去使用字体库的斜体字。
  • font-weight（字体粗细）
属性值
normal：设置字体为正常字符。相当于数字值400
bold：设置字体为粗体。相当于数字值700.
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来越粗，取值范围100,200,300,400,500,600,700,800,900

注意：
font-weight的常用值有两个normal和bold。其他的值在浏览器中的支持并不太好。
  • font-size（字体大小）
font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置默认值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（px）、字符（em，默认lem等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定）、百分比（%）、磅（点）（pt）。

字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版本已经修复。
  • font-family（字体族）
font-family可以指定元素使用的字体系列或者字体族。当我们使用font-family指定字体族的时候，可以指定多种字体，作为候补。指定多个字体的时候，需要使用逗号隔开。
如果CSS中没有声明当前内容使用的字体族的时候，默认：
	中文：宋体 【win7以后默认是 微软雅黑】
	英文：Arial
  • color（字体颜色）
可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有RGBA、HSL、HSLA，不过最低版本的浏览器并不支持

color: red;
color: RGB(123,222,34);
color: #336699;

另外要注意，使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写ABC来表达

  • text-align（文本对齐方式）
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left
居中对齐center
右对齐right
justify 实现两端对齐文本效果
  • text-decoration
使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，linethrough四种
none ：不设置装饰
underline ：下划线装饰
overline： 上实线装饰
linethrough：中实线装饰
  • line-height（字体行高）
字体行高即字体最低端与字体内部顶端之间的距离。值可以是normal，px，number，%。

行高=字体大小 + 上半行距 + 下半行距

  • vertical-align
    vertical-align属性设置元素的垂直对齐方式。
值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
       img{
           vertical-align: bottom;
           /*vertical-align: -110px;*/
       }
   </style>
</head>
<body>

<img src="图片地址" alt="">
<span>yuan</span>
</body>
</html>

1.3.2 背景属性

  • background-color（背景颜色）

页面的背景颜色有四种属性值表示，分别是transparent（透明），RGB十进制颜色表示，十六进制颜色表示和颜色单词表示。

属性使用：

background-color: transparent; /* 透明 */
background-color: rgb(255,0,0); /* 红色背景 */
background-color: #ff0000; /* 红色背景 */
background-color: red; /* 红色背景 */

rgb() red green blue,数值越大颜色越深

  • background-image（背景图片）

background-image可以引入一张图片作为元素的背景图像。默认情况下，background-image防止在元素的左上角，并在垂直和水平方向重复平铺。

语法：

background-image:url('图片地址')

当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上，所以当背景图片没有被加载到，或者不能完全铺满元素时，就会显示背景颜色。

  • background-repeat（背景平铺方式）

CSS中，当使用图像作为背景了以后，都是默认吧整个页面平铺满的，但是有时候在很多场合下面，页面不需要这种默认的效果，而可能需要背景图像只显示一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。

background-repeat专门用于设置背景图像的平铺方式，一般有四个值

repeat 平铺（默认值）
no-repeat 不平铺
repeat-x x轴平铺
repeat-y y轴平铺
  • background-position（背景定位）

CSS中支持元素对背景图像的定位摆放功能，就是利用background-position属性来实现，以页面中元素的左上角为圆点（0,0），把元素的内部区域当成一个坐标轴（上边框为x轴，越往左x的值越大，左边框为y轴，越往下y轴的值越大，反之亦然），然后计算出背景图片的左上角与圆点的距离（x轴和y轴的距离），然后把背景图片放入到指定的职位上，对背景图片的位置进行精确的控制和摆放。

background-position的值分成两个，使用空格隔开，前面一个是背景图片左上角的X轴坐标，后面一个是背景图片左上角的Y轴坐标。两个值都可以是正、负值。

语法

background-position：x轴坐标 y轴坐标

背景定位的值除了是具体的数值以外，还可以是左（left）、中（center）、右（right）

  • background（背景样式缩写）

和字体属性一样，多个不同背景样式属性也是可以同时所写的，不过不需要像字体那样按照一定的顺序，背景样式的缩写属性的顺序是不固定的，可以任意编排。

background：背景颜色   背景图片  背景平铺方式  背景定位；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            width: 50px;
            height: 50px;
            border: 1px solid red
            background-color: orange;
            /*background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=150390171,757377814&fm=26&gp=0.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: -174px -47px;*/
            background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=150390171,757377814&fm=26&gp=0.jpg") no-repeat -174px -47px;
        }
    </style>

</head>
<body>
<div class="c1"></div>
</body>
</html>

1.3.3 边框属性

  • border-style（边框风格）

定义边框的风格、值可以有

none:没有边框，当border的值为none的时候，系统将会忽略[border-color]

hidden：隐藏边框，低版本浏览器不支持

dotted：点状边框

dashed：虚线边框

solid：实线边框

double：双实线边框，两条单线与其间隔的和等于border-width

border-style的值可以缩写的：

只有一个值的时候表示同时控制上下左右的边框风格。

只有两个值的时候表示分别控制上下、左右的边框风格。

有三个值的时候表示分别控制上、左右、下的边框风格。

有四个只的时候表示分别控制上、右、下、左的边框风格

border-style还可以单独指定不同方向

border-top-style 设置上边的边框风格

border-bottom-style 设置下边的边框风格

border-left-style 设置左边的边框风格

border-right-style 设置右边的边框风格
  • border-width（边框宽度）
    使用border-width可以定义边框的厚度，值可以是medium，thin，thick和指定数值的宽度。 同时，border-width也可以进行缩写：
只有一个值的时候表示同时控制上下左右的边框宽度。

只有两个值的时候表示分别控制上下、左右的边框宽度。

有三个值的时候表示分别控制上、左右、下的边框宽度。

有四个只的时候表示分别控制上、右、下、左的边框宽度。

border-width也可以单独指定不同方向

border-top-width 设置上边的边框宽度

border-bottom-width 设置下边的边框宽度

border-left-width 设置左边的边框宽度

border-right-width 设置右边的边框宽度
  • border-color（边框颜色）
    定义边框的颜色，值表示的方式可以是十六进制，RGB十进制和单词表示法

border-colorde的缩写

只有一个值的时候表示同时控制上下左右的边框颜色。

只有两个值的时候表示分别控制上下、左右的边框颜色。

有三个值的时候表示分别控制上、左右、下的边框颜色。

有四个只的时候表示分别控制上、右、下、左的边框颜色。

border-color也可以单独指定不同方向：

border-top-color 设置上边的边框颜色

border-bottom-color 设置下边的边框颜色

border-left-color 设置左边的边框颜色

border-right-color 设置右边的边框颜色
  • 边框样式缩写
    还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写：语法：
border: 边框宽度 边框样式 边框颜色;

注意，border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样
式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            /*设置宽度*/
            width: 200px;       
            /*设置高度*/
            height: 200px;
            /*设置边框*/
            border: 1px solid black;
            /*设置边框颜色*/
            border-color: blue;
            /*设置边框宽度*/
            border-width: 5px;
            /*设置下边框*/
            border-bottom: 10px red solid;
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

1.3.4 列表属性

CSS中提供了一些列表属性可以用来：

(1)、设置不同的列表项标记为有序列表
(2)、设置不同的列表项标记为无序列表
(3)、设置列表项标记为图像

list-style-type（系统提供的列表项目符号）

值 描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul{
            /*list-style-type: decimal;*/
            list-style-image: url("https://www.w3school.com.cn/i/eg_arrow.gif");
        }
    </style>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
</body>
</html>

list-style-image（自定义的列表项目符号）

 li { list-style-image:url('qq.gif'); }

1.3.5 display属性

display可以指定元素的显示模式，它可以吧行内元素修改成块元素，也可以吧别的模式的元素改成行内元素。display常用的值有四个

语法

display: block; /* 声明当前元素的显示模式为块状元素 */

display: inline; /* 声明当前元素的显示模式为行内元素 */

display: inline-block; /* 声明当前元素的显示模式为行内块状元素 */

display: none; /* 声明当前元素的显示模式为隐藏 */


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        .c2{
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
            /*声明当前元素的显示模式为隐藏 */
            display: none;
        }
        .c3{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="c1">li</div>
<div class="c2">alvin</div>
<div class="c3">egic</div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        .c1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            display: inline-block;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
            /*声明当前元素的显示模式为隐藏 */
            display: inline-block;
        }
        .c3{
            width: 200px;
            height: 200px;
            background-color: orange;
            display: inline-block;
            margin-left: 300px;
        }
    </style>
</head>
<body>
<div class="c1">li</div>
<div class="c2">alvin</div>
<div class="c3">egic</div>
</body>
</html>

1.3.6 盒子模型

盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互，HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

  • padding（内边距及其缩写）
    内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值不能是负值，相当于table标签的cellpadding属性。

内边距可以设置多个值

当padding只有一个值的时候表示同时控制上下左右的内边距。

当padding只有两个值的时候表示分别控制上下、左右的内边距。

当padding有三个值的时候表示分别控制上、左右、下的内边距。

当padding有四个只的时候表示分别控制上、右、下、左的内边距。

内边距也可以进行单独设置：

padding-top 设置上边的外边距

padding -bottom 设置下边的外边距

padding -left 设置左边的外边距

padding -right 设置右边的外边距
  • margin（外边距及其缩写）

外边距，也叫“外补白”，表示页面中元素与元素之间的距离。外边距越大，两者的距离就越远，反之，如果外边距越小，则元素之间的距离就越近，外边距的值可以是正数，也可以是负数。

margin也可以像padding一样设置多个值和单独方向设置，用法一样。

1.在网页的开发过程中，需要让一个元素相对于父级元素水平居中时，可以借助margin的特性来实现。
使用margin让元素自身居中：margin:0 auto
2.浏览器的默认边距清零。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            width: 100%;
            height: 600px;
            border: 1px solid red;
        }
        .c2{
            width: 50%;
            height: 40px;
            background-color: rebeccapurple;
            margin: 10px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
    <div class="c2"></div>
</div>
</body>
</html>

边距案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认属性*/
        *{
            margin: 0;      /*设置外边距为0*/
            /*左边距调整为0*/
            padding: 0;
        }

        .c1{
            width: 80%;     /*规定单元格的宽度*/
            margin: 100px auto;     /*设置外边距为100像素，并且居中*/
        }
        .c1 .list{
            list-style: none;  /*取消列表标识*/
        }
        .c1 .list li{
            /*多行变一行,设置间距10px*/
            display: inline-block;  /*声明当前元素的显示为行内块元素*/
            margin: 10px;
        }
        .c1 .list li a{
            font-size: 16px;
            color: #333;    /*设置字体颜色*/
            padding: 20px;  /*控制上下左右的内边距*/
            border: 1px solid rebeccapurple;  /*定义边框宽度，样式 颜色*/
            text-decoration: none;  /*a标签下划线设置为空*/
        }
    </style>

</head>
<body>

<div class="c1">
    <ul class="list">
        <li><a href=""><span>红米</span></a></li>
        <li><a href=""><span>电视</span></a></li>
        <li><a href=""><span>笔记本</span></a></li>
        <li><a href=""><span>家电</span></a></li>
        <li><a href=""><span>小米手机</span></a></li>
    </ul>
</div>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            width: 200px;
            height: 200px;
            /*内边距*/
            padding: 50px;
            /*padding: 50px 20px 100px 80px;*/
            background-color: yellowgreen;
            border: 1px solid red;
            /*设置下边的外边距*/
            margin-bottom: 30px;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="c1">li</div>
    <div class="c2"></div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .c1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div class="c1">li</div>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
</body>
</html>

如何在一个声明中设置所有背景属性：

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

定义和用法
background简写属性在一个声明中设置所有的背景属性。

默认值 not specified
继承性 no
值 描述
background-color 规定要使用的背景颜色
background-position 规定背景图像的位置
background-size 规定背景图片的尺寸
background-repeat 规定如何重复背景图像
background-origin 规定背景图片的定位区域
background-clip 规定背景的绘制区域
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动
background-image 规定要使用的背景图像
inherit 规定应该从父元素继承background属性的设置

float浮动

1.流动布局

流动布局（flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。

在正常情况下，HTML元素都会根据文档流来分布网页内容的

文档流的2大特征

1.块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置
2.行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置，行内元素摆放满一行以后才会到下一行继续排列。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title></title>
    <style>
        div{
            border: 1px solid #f00; margin: 4px;
        }
        .d3{
            width: 100px;
        }
    </style>
</head>
<body>
    <div>d1</div>
    <div>d2</div>
    <div class="d3">
    <span>span1</span>
    <a>a1</a>
    <a>a2</a>
    <span>span2</span>
    </div>
</body>
</html>

2.浮动模型

浮动属性是网页布局中最常用的属性之一，通过浮动属性不但可以很好的实现页面布局，而且还可以依靠它来制作导航栏等页面功能。

一旦元素设置浮动，该元素具有inline-bock

简单浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单浮动</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;
            float: left;
        }
        .c2{
            width: 300px;
            height: 200px;
            background-color: orange;
            float: left;
        }
        .c3{
            width: 400px;
            height: 200px;
            background-color: lightblue;
            float: left;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

字围效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;
            /*设置左边浮动*/
            float: left;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: orange;
            /*设置左边浮动*/
            float: left;
        }
         .c3{
            width: 200px;
            height: 200px;
            background-color: lightblue;
             /*设置左边浮动*/
             float: left
        }
        .c4  .img{
            /*设置左边浮动*/
            float: left;
        }
    </style>

</head>
<body>

    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>

    <div class="c4">
        <div class="img"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2654578650,2494787428&fm=26&gp=0.jpg" alt=""></div>
        <p>
            道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
           道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
           道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
          道可道，非常道；名可名，非常名。
          无名，天地之始，有名，万物之母。
          故常无欲，以观其妙，常有欲，以观其徼。
          此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。
        </p>
    </div>
</body>
</html>

当一个元素被设置浮动后，将具有以下特性：
1.任何申明为float的元素都会被自动设置为一个行内块庄元素，具有行内块状元素的特性。
2.假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤到下一行）；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会变化，也就是说A的顶端总是和上一个元素的底部对齐。
3.在标准浏览器中如果浮动元素A脱离了文档流，那么排在浮动元素A后的元素将会往回排列占据浮动元素A本来所处的位置，使页面布局产生变化。
4.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
5.字围效果：文字内容会围绕在浮动元素的周围
6.浮动元素只能浮动至左侧或者右侧
7.浮动元素只能影响在其后面元素的布局，却无法影响出现浮动元素之前的元素。

清除浮动

网页布局中，最常用的局部便是浮动模型，但是浮动了以后就会破坏原有的文档流，是页面产生不必要的改动，所以一般在浮动了以后，达到目的了，接近接着清除浮动。

在主流浏览器（谷歌）下下，如果没有设置height，元素的高度默认为auto，且其中内容中有浮动元素时，这种情况下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的情况，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处理操作，CSS里面叫“清除浮动”。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>简单浮动</title>
    <style>
        .box{
            border: 1px solid red;
        }
        .c1{
            width: 200px;
            height: 300px;
            background-color: indianred;
            float: left;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: orange;
            float: right;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: yellowgreen;
        }

    </style>
</head>
<body>

  <div class="box cleaffix">
      <div class="c1"></div>
      <div class="c2"></div>
  </div>
  <div class="footer"></div>
</body>
</html>

clear是CSS中专用于清除浮动的，常用的属性值有以下几个：

值 描述
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认值。允许浮动元素出现在两侧 
<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>简单浮动</title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;
            float: left;
        }
        .c2{
            width: 300px;
            height: 200px;
            background-color: orange;
            /*一旦元素设置浮动，该元素具有inline-bock*/
            float: left;
            clear: left;
        }
        .c3{
            width: 400px;
            height: 200px;
            background-color: lightblue;
            float: left;
        }
    </style>
  </head>
  <body>
   <div class="c1"></div>
   <div class="c2"></div>
   <div class="c3"></div>
  </body>
</html>

父级塌陷

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>简单浮动</title>
    <style>
        .box{
            border: 1px solid red;
        }
        .c1{
            width: 200px;
            height: 300px;
            background-color: indianred;
            float: left;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: orange;
            /*一旦元素设置浮动，该元素具有inline-bock*/
            float: right;
        }
        .footer{
            width: 100%;
            height: 60px;
            background-color: yellowgreen;
        }
        .cleaffix:after{	/*在类名为“cleafix”的元素内最后面加入元素*/
            content: ""; /*加入的内容为空*/
            display: block;  /*加入的这个元素转为块级元素。*/
            clear: both;  /*清除左右两边浮动*/
            visibility: hidden;     /*可见度设为隐藏。注意和display:none是有区别的*/
			/*visibility: hidden;仍然占据着空间，只是看不到而已*/
            line-height: 0;   /*行高为0*/
            height: 0;		/*高度为0*/
            font-size: 0;		/*字体大小为0*/
        }
	        /*.box{*/
            /*overflow: hidden;       !*溢出隐藏属性*!*/
        /*}
    </style>
</head>
<body>

  <div class="box cleaffix">
      <div class="c1"></div>
      <div class="c2"></div>
  </div>
  <div class="footer"></div>
</body>
</html>

>.cleaffix:after 代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在HTML文件中写入大量毫无意义的空标签，又能清除浮动。


overflow: hidden
和
加空标签
两个方式都可以解决父级塌陷问题。

position属性

就像photoshop中的图层功能会把一整张图片分为一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。

定位position属性的四个值

值 描述
static 静态定位（默认）
relative 相对定位
absolute 绝对定位
fixed 固定定位

元素设置了定位以后，还要依靠4个方位属性来进行定位摆放。

方位属性

属性 描述 示例
top 让元素相对于指定目标的顶部偏移指定的距离 top: 10px 表示距离顶部10像素
right 让元素相对于指定目标的右边偏移指定的距离 right: 10px 表示距离右侧10像素
bottom 让元素相对于指定目标的底部偏移指定的距离 bottom: 10px 表示距离底部10像素
left 让元素相对于指定目标的左边偏移指定的距离 left: 10ox 表示距离左边10像素

相对定位（relative）

相对定位就是在正常文档流中，元素相对于自身定位使用left、right、top、bottom属性进行定位偏移

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title></title>
    <style>
        *{
            margin: 0;
        }
        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;

        }
        .c2{
            width: 300px;
            height: 200px;
            background-color: orange;
            /*参照位置：原始位置 2 不脱离文档流*/
            position: relative;
            top: 100px;
            left: 100px;

        }
        .c3{
            width: 400px;
            height: 200px;
            background-color: lightblue;

        }
    </style>
  </head>
  <body>
   <div class="c1"></div>
   <div class="c2"></div>
   <div class="c3"></div>
  </body>
</html>

绝对定位（absolute）

绝对定位就是将元素脱离文档流，然后使用left、top、bottom属性相对于其最近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <style>
        *{
            margin: 0;
        }
        .c1{
            width: 200px;
            height: 200px;
            background-color: indianred;

        }
        .c2{
            width: 300px;
            height: 200px;
            background-color: orange;
            /*参照位置：已定位的最近的父亲标签，一直延伸到body层 完全脱离文档流*/
            position: absolute;
            top: 100px;
            left: 100px;

        }
        .c3{
            width: 400px;
            height: 200px;
            background-color: lightblue;
        }
        .f{
            position: relative;
			/*相对定位到了原地，在绝对定位*/
        }
    </style>
  </head>
  <body>
  <div class="c1"></div>
  <div class="f">
      <div class="c2"></div>
  </div>
  <div class="c3"></div>
  </body>
</html>

jd轮播图

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>简单浮动</title>
    <style>
        /*清除浏览器默认边距*/
        *{
            margin: 0;
        }
        /*设置一个轮廓图*/
        .lunbo{
            width: 590px;
            height: 470px;
            border: 1px solid red;
            margin: 100px auto;
        }
        /*清除格式，并设置图片内边距为0*/
        .lunbo ul{
            list-style: none;
            padding: 0;
        }
        /*相对定位,给下面定位做参照*/
        .lunbo{
            position: relative;
        }
        /*设置图片像素并定位*/
        .lunbo img{
            width: 590px;
            height: 470px;
            /*设置决定定位，使所有图片重合*/
            position: absolute;
            top: 0;
            left: 0;
        }
        .lunbo .btn{
            position: absolute;
            /*宽度必须设置*/
            width: 100%;
            top: 50%;
            /*border: 2px solid black;*/
        }
        /*设置翻页图表*/
        .lunbo .btn div{
            width: 80px;
            height: 60px;
            background-color: lightgray;
            font-size: 32px;
            color: white;
            text-align: center;
            line-height: 60px;
            border-radius: 20%;
        }
        .lunbo .btn .left_btn{
            left: 0;
            float: left;
        }
        .lunbo .btn .right_btn{
            float: right;
            /*right: 0;*/
        }
    </style>
</head>
<body>

<div class="lunbo">
    <ul class="imgs">
          <li><a href=""><img src="https://imgcps.jd.com/ling4/2922989/5bCd5ZOB6LSo5aW96Iy2/5aSa5Lmw5LyY5oOgMuS7tjnmipjotbc/p-5bd8253082acdd181d02fa28/9534514b/cr/s/q.jpg" alt=""></a></li>
          <li><a href=""><img src="https://imgcps.jd.com/ling4/4808741/54iG5qy-5aW96LSn6LSt/6YOo5YiG5aW96LSn5LmwMei1oDE/p-5bd8253082acdd181d02fa02/41cc41d6/cr/s/q.jpg" alt=""></a></li>
          <li><a href=""><img src="https://img30.360buyimg.com/pop/s1180x940_jfs/t1/162354/26/13148/91175/6051a5baEbb0363f6/d30fbb4412e49cef.jpg.webp" alt=""></a></li>
          <li><a href=""><img src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/162762/28/11971/102164/604adaf4E270bdfad/6cc2480f31e8ce1c.jpg.webp" alt=""></a></li>
    </ul>
    <div class="btn">
        <div class="left_btn"> < </div>
        <div class="right_btn"> > </div>
    </div>
</div>

</body>
</html>

固定定位（fixed）

固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            width: 100%;
            height: 2000px;
            background-color: lightcoral;
        }
        .c2{
            width: 150px;   /*宽150像素*/
            height: 80px;   /*高80像素*/
            background-color: orange;  /*背景颜色*/
            text-align: center;  /*字体居中*/
            line-height: 80px;  /*行高80像素*/
            font-size: 26px;  /*字体26像素*/

            position: fixed;       /*固定定位*/
            /*参照物：屏幕 完全脱离文档流*/
            bottom: 50%;        /*目标距离底部偏移50%*/
            right: 20px;        /*目标距离右侧20像素*/
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">返回顶部</div>
</body>
</html>

标签：color,元素,边框,width,background,border,CSS
From： https://www.cnblogs.com/megshuai/p/18517759

相关文章

  • HTML&CSS：3D旋转动画机器人摄像头
    效果演示创建了一个3D机器人摄像头效果。HTML<divclass="modelViewPort"><divclass="eva"><divclass="head"><divclass="eyeChamber"><divclass="eye">......
  • CSS3可视化网站
    Uiverse uiverse.io/这是一个国外的开源项目，所有效果全部拿来即用，都不用安装任何第三方包。并且每个小组件的效果都非常炸裂。项目包含了我们常用到的一些组件，例如：按钮Button、多选框Checkbox、胶囊按钮Switch、加载特效Loading、输入框Input、表单Form、提示框TooltipCSS......
  • Taro 鸿蒙技术内幕系列（二）：如何让 W3C 标准的 CSS跑在鸿蒙上
    作者：京东零售马银涛 基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测，本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景HarmonyOS采用自研的ArkUI框架作为原生UI开发方案，这套方案有完善的布局系统和样式控制，但是他的标准与W3C......
  • HTML5期末大作业：HTM+CSS+JS仿安徽开放大学官网（web前端网页制作课作业）
    ......
  • 第七章利用CSS和多媒体美化页面
    通过对网页中元素、布局和色彩的合理设计，可以使网页达到较好的视觉效果。网页中常用超链接、列表和表格等网页元素，所以，对这些元素进行美化，可以大大提高网站的质量。尤其是多媒体元素的加入，使网页更加丰富多彩。7.1CSS链接的美化在前面的章节中，已经学习了超链接的简单知识......
  • 568. 蜡笔小新动漫主题 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这......
  • CSS(块级,行级,行块级,display,div和span,盒子模型,文档流,浮动)
    块级,行级,行块级块级:无论内容都是,都会独自占据一行的.可以设置宽高,若没有设置宽高,默认于父级标签相同.例如:<p>,<h1>,<ul>,<ol>,<hr/>等.行级:只占自身大小的标签,不会占一行.设置宽高无效.例如:<font>,<b>,<i>,<a>等.行块级:不会占一行,而且可以设置宽高.例如:<inp......
  • 566. 火影忍者动漫主题网页 大学生期末大作业 Web前端网页制作 html+css
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好......
  • html和css面试题
    1:主流浏览器的内核分别是什么？IE：trident内核 [‘traidnt]Firefox：gecko内核 [ˈɡekəʊ]Safari：webkit内核Chrome,Opera：Blink内核(基于webkit) 2:每个HTML文件开头都有<!DOCTYPE html>，它的作用是什么<!DOCTYPEhtml>声明位于文档中的最前面的位置，此标签告知浏......
  • 前端面试题整合（有html、css、js、vue等）
    #一、html#行内外空元素行内元素:a/img/span/b/strong/input/select/section块级元素:div/p/table/ul/li/h1-h6空元素:br/hr/img/input/link/meta#浏览器内核Trident：IE，360，搜狗Gecko：FirefoxPresto：旧OperaWebkit：Safari，旧ChromeBlink：Chrome，Opera#浏览器存储c......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99