首页 > 其他分享> > CSS页面布局及排版

CSS页面布局及排版

2022-05-29 19:03:18 作者：互联网

一、CSS简介

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档的语言，可以将文档以更优雅的形式呈现给用户。

二、CSS使用

根据定义CSS位置不同，分为行内样式、内部样式和外部样式。

1、行内样式

内联样式：直接在标签中编写样式，通过使用标签标签内部属性style。

<html标签 style="样式1:值1;样式2:值2;"></html标签>
<div class="box" style="height: 2000px; background-color: palegreen;">行内样式</div>

缺点：只能对当前标签生效，没有做到内容与样式分离，耦合度太高。

2、内部样式

定义在head标签内，通过style标签，该标签内容就是Css代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>
            div{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>内部样式</div>
    </body>
</html>

3、外部样式

提前定义的CSS资源文件
在head标签内，定义link标签引入外部样式文件。

<link rel="stylesheet" href="../样式.css">

作用域范围：

外部样式表>内部样式表>行内样式表

优先级：

外部样式表<内部样式表<行内出样式表

相同的样式作用在同一个标签上：就近原则；不同的样式作用在同一个标签上：叠加。

加载外部样式表或者内部样式表时候，需要注意加载顺序：加载html文件是从上向下加载的，也就是后面加载的样式会覆盖前面的样式。

4、CSS语法

选择器{
    属性1：值1;
    属性2：值2;
    ......
}
选择器：筛选具有相似特征的元素
属性与属性值之间用冒号分开；不同属性之间使用分号隔开。
例如：
h1{
    color:red;
    font-size:12px;
}

5、CSS注释

css注释以/*开始，*/结束。

/*这是CSS的注释*/
h1{
    color:red;  /*这是颜色的注释*/
    font-size:12px;
}

三、基本选择器

1、id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一。

id选择器可以为标有特定id的html元素指定特定的样式。

html元素以id属性来设置id选择器，CSS中的id选择器以“#”来定义。

PS：id属性值不要以数字开头，数字开头的id在Firefox/Mozilia中不起作用。

虽然多个元素可以使用同一个id选择器设置样式，但是不推荐；如果需要同样的样式对多个标签起作用可以使用类选择器。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #myDiv{
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="myDiv">id选择器 用'#'定义</div>
</body>

2、class选择器

选择具有相同class属性值元素。

class选择器用于描述一组元素样式，class选择器有别于id选择器，可以在多个元素中使用。

class选择器在html中以class表示，在css中以一个点"."表示。

PS：class属性值不要以数字开头，数字开头的id在Firefox/Mozilia中不起作用。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .myClass{
            color: red;
        }
    </style>
</head>
<body>
    <div class="myClass">class选择器用.定义</div>
</body>

3、元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}

ps:标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有同名的标签上

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>第一段</div>
    <div>第二段</div>
</body>

4、选择器优先级

ID选择器>class选择器>标签选择器

当多个选择器作用在同一个标签上时，如果属性冲突看优先级，如果不冲突样式叠加生效。

特权：！important

权值：

行内样式：1000
#id：100
.class类、伪类：10
元素、伪对象：1

5、样式表的优先级

行内样式表>内部样式表>外部样式表

三个样式表中都有同样的内容作用在同一个标签上时，如果属性冲突看优先级，如果不冲突样式叠加。

6、CSS选择器总结

核心选择器

层次选择器

伪类选择器（过滤器）

与状态相关

与子元素相关

伪元素选择器

属性选择器

四、CSS常用样式

1、color：字体颜色

三种颜色值：

颜色的单词 red blue......
rgb(红，绿，蓝)三色取值范围：0-255
rgba(红，绿，蓝，透明度)透明度取值：0-1，0全透明，1不透明，0.5半透明。

#值1值2值3：值的范式：00-FF 对应关系： #FF0000->rgb(255,0,0)

2、width height：宽高

PS：只有块状元素可以设置宽高，行级元素设置宽高不生效。

取值方式两种：

数值绝对值单位px
百分比占据父元素比例

3、背景样式

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .bg{
        /*背景色*/
        background-color: cornflowerblue;
        /*背景图片：背景图片小于标签的宽高时，默认平铺*/
        background-image: url(../img/1.jpg);
        /* 背景平铺方式：不设置时候默认xy轴同时平铺
         repeat-x:横轴平铺
         repeat-y:纵轴平铺
         repeat:xy同时平铺
         no-repeat:不平铺
         * */
        background-repeat: no-repeat;
        /*背景位置：第一个单数：x轴上偏移距离，整数向右移动，负数向左移动
                     第二个单数：y轴上的偏移距离，整数向下移动，负数向上移动*/
        background-position: 10% 20px;
    }
    .bg2{
        /*将以上所有跟背景相关样式缩写
         缩写顺序：背景色、背景图片、背景图片平铺方式、背景的X轴偏移、背景的y轴偏移
         多属性之间使用空格隔开
         * */
        background: blanchedalmond url(../img/1.jpg) no-repeat 20px 30px;
    }
    </style>
</head>
<body class="bg2">
</body>

4、文本样式

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*块状元素都有宽高属性；行级元素没有宽高*/
            width: 90%;
            height: 400px;
            /*背景样式*/
            background: tan url(../img/1.jpg) no-repeat 10px 10px;
            /*字体*/
            font-size: 18px;
            font-family: "微软雅黑";
            font-weight: bold;
            /*字体缩写：粗细 大小 样式*/
            font: bold 24px "微软雅黑";
            /*文本样式*/
            /*划线位置：line-through 中划线   underline 下划线 none 没有划线*/
            text-decoration: underline;
            /*文本的水平对齐方式：left right center*/
            text-align: center;
            /*文本的垂直对齐方式：没有单个属性可以设置垂直对齐;
             一般单行的时候使用高度等于行高设置垂直居中；
             多行使用盒子模型*/
            line-height: 400px;
            /*文字之间的间隙*/
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div>
        我有一个梦想，i have a dream
    </div>
</body>

5、列表样式

<style>
    li{
        background-color: lemonchiffon;
        /*列表样式：常用取值：none-无样式 square-正方形 circle-空心圆 decimal-数字*/
        list-style-type: circle;
        /*列表样式为自定义图片*/
        list-style-image: url(../img/2.jpg);
        /*列表样式的放置位置*/
        list-style-position: inside;
        /*列表样式缩写*/
        list-style: square url(../img/2.jpg) inside;
        /*常用的列表样式*/
        list-style: none;
    }
</style>

6、边框样式

<style>
    .border{
        /*边框宽度*/
        border-width: 2px;
        /*边框颜色*/
        border-color: red;
        /*边框样式：solid 实线  dotted 点线  dashed 虚线*/
        border-style: dashed;
        /*边框样式缩写：样式 颜色 宽度*/
        border:solid green 5px;
        /*边框可以为4个方向分别设置*/
        border-top: dashed black 4px;
        border-right: dashed #FF00FF 4px;
        border-bottom: dotted darkblue 4px;
        border-left: solid fuchsia 5px;
        /*没有边框*/
        border: none;
        /*常用的细边框样式*/
        border: solid 1px #ccc;
    }
</style>

五、盒子模型

所有的html元素可以看做是盒子，在css中，"box model"是用来设计和布局时使用。

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

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

margin：外边距，清除边框外区域，外边距是透明的。
border：边框，围绕在内边距和内容外的边框。
padding：内边距，清除内容周围区域内边距是透明的。
content：内容，显示文字和图像。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /* border:边框，分4个方向，同理margin、padding也分为四个方向
    * margin:元素与元素之间对的距离
    * padding:内容与边框之间的距离
    * 设置的时候顺序：上 右 下 左
    */
        .div{
            border: solid red 10px;
            /*四个方向上的元素与元素之间的距离都是50px*/
            margin: 50px;
            /*两个值的时候：第一个参数表示上下距离都是50px,第二个参数表示左右距离都是100px*/
            margin: 50px 100px;
            padding: 50px;
            /*
             一个元素真正的宽度=width+左右padding值+左右的border值
             一个元素的真正高度=height+上下的padding值+上下的border值
             * */
        }
    </style>
</head>
<body>
    <div class="div">111111111112222222222223333333333333333</div>
</body>

1、盒子的宽高

元素的实际宽度和高度：

计算一个元素在实际在页面占据的总宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素实际在页面占据的总高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2、设置宽度=元素实际宽度，box-sizing属性。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* box-sizing:确认元素的大小
        content-box: 实际宽度=width+左右的psdding值+上下的border值
                     实际高度=height+上下的padding值+上下的border值
        border-box:实际宽度=width;实际高度=height
                    padding和border不会影响元素的实际宽高
        * */
        .box{
           width: 100px;
           height: 200px;
           border: 5px solid;
           padding: 5px;
           box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="box">你好中国</div>
</body>

六、更多常用样式

1、float

CSS的float会使得元素向左或者向右移动，其周围的元素也会重新排列。

float往往应用于图像，但它在布局时候一样有用。

块元素脱离默认文档流，默认宽度为0，失去了对父元素支撑的能力。在浮动流中，多个同级别浮动元素在一行中显示，当这一行容纳不下，会自动换行。

1.1 元素怎样浮动

元素的左右方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

1.2 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相连。

1.3 清除浮动

元素浮动之后，周围元素将重新排列，为了避免这种情况，使用clear属性清除浮动。

clear属性指定元素两侧不能出现浮动。

<head>
<meta charset="UTF-8">
<title></title>
<style>
    div{
        width: 400px;
        height: 200px;
        margin-bottom: 10px;
    }
</style>
</head>
<body>
    <!--
    没有浮动属性的元素都属于常规文档流，从上往下从左往右依次显示
    浮动的元素都脱离了常规文档流；
    为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层
    如果想要非浮动元素不受浮动元素影响，需要使用clear属性。
    -->
    <div style="background: rgba(255,0,0,0.5);float: left;">
        div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
    </div>
    <div style="background: lawngreen;width: 600px;height: 350px;">
        div2-未浮动，常规文档流，<br/>
        PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响。
        如果不想让div2被浮动元素影响，需要添加clear属性。
        添加clear：left;之后div2就会忽略div1浮动的影响，在div1后面显示，不会重叠
    </div>
    <div style="background: lightblue;float: right;width: 1800px;">
        div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
    </div>
    <div style="background: lightcoral;width: 600px;height: 350px;">
        div4-未浮动，常规文档流，<br/>
        PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响
        如果不想让div4被浮动影响，需要添加clear属性。
        添加clear:right;之后div4就会忽略div3浮动影响，在div3后面显示，不会重叠了。
        clear属性有三个取值：left、right、both;分别是去除左浮动、右浮动和所有浮动影响。
    </div>
    <div style="background: lavender;">
        div5-未浮动，常规文档流。
    </div>
</body>

清理浮动，为容器内部添加一个子元素，一般使用伪元素较方便。

div::after {
    content:"";
    display:block;
    clear:both;
}

2、Overflow

控制内容溢出元素框时显示方式。

overflow属性有如下值：

注意：overflow属性只作用于规定高度的块元素上。

在Mac系统中，滚动条默认是隐藏的，使用的时候才显示。

3、Display和Visibility

3.1 两者之间的区别

display设置一个元素应该如何显示，visibility设置一个元素可见还是隐藏。

隐藏一个元素可以通过把display设置为“none”或者visibility设置为“hidden”。但是这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素任然占用与未影藏之前一样的空间。该元素虽然被隐藏了但任然影响布局。

display：none也会隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不仅被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

3.2 display样式

display:block；显示为块元素

display:inline；显示为内联元素

display:inline-block 显示为内联块元素，表现为同行显示并且可以修改宽高内外边距等属性。

七、复合选择器

由两个或多个基础选择器，通过不同方式组合而成。

可以更准确更细致的选择目标元素标签。

1、全局选择器

*{} 一般去掉标签的一些默认效果时候使用，或者整站通用效果时使用。但是不推荐使用。

2、并集选择器

并集选择器是各选择器通过连接形成的，通常用于集体声明。

语法：选择器1,选择器2,...,选择器n{}

任何形式选择器都可以作为并集选择器的一部分(标签选择器、class选择器、id选择器)。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div,p,ul,li,ol,dl,dd,dt{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div>111111111</div>
    <p>22222222</p>
    <ul><li>333333333</li></ul>
</body>

3、交集选择器

条件：交集选择器又两个选择器构成，找到的标签必须满足，既有标签一的特点，也有标签二的特点。

语法：h3.class{color:red}

其中第一个选择器为标签选择器，第二个为类选择器。两个选择器之间不能有空格。

交集选择器是并且的意思，即...又...的意思。

4、后代选择器

概念：后代选择器又称为包含选择器。

作用：用来选择元素或者元素组的子孙后代。

将外层元素写在外面，内层元素写在后面，中间用空格分开。爷爷，父亲，儿子，孙子...

格式：父亲儿子{属性:属性值;属性:属性值} 例如：.class h3{color:red;font-size:16px}

当标签发生嵌套时，内层标签就成为外层标签的后代。

5、子元素选择器

作用：子元素选择器只能选择作为某个元素子元素(亲儿子)的元素。

写法：父元素写在前面，子元素写在后面，中间用>连接。

例如：.class>h3{color:red;font-size:16px}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复合选择器</title>
        <style>
        /*全局选择器：一般去表标签的一些默认效果时候使用，或者整站通用效果时候使用。但是不推荐这么设置。
         */    
         *{
             color: #333;
         }
         /*并集选择器：通常用户集体声明
          * 替换全局选择器
          */
         div,p,dl,dt,dd{
             margin: 0px;
             padding: 0px;
             color: #333;
         }
         /*交集选择器*/
        li.myli{
            color: green;
        }
        /*后代选择器*/
        ul li{
            font-size: 28px;
        }
        .myUL li{
            font-family: "微软雅黑";
        }
        .myUL li a{
            text-decoration: line-through;
        }
        /*子元素选择器*/
        .demo>h3{
            color: blue;
        }
        </style>
    </head>
    <body>
        <ul>
            <li>1111111111111111111</li>
            <li class="myli">2222222222222222222</li>
            <li>3333333333333333333</li>
            <li>4444444444444444444<a href="#">click me</a></li>
            <li class="myUL">
                        <ul>
                        <li>li1111111111111111</li>
                        <li class="myli">li2222222222222222</li>
                        <li>li3333333333333333</li>
                        <li>li4444444444444444<a href="#">click me</a></li>
                        </ul>
            </li>
        </ul>
        <ol>
            <li>111111111111111111</li>
            <li>222222222222222222</li>
            <li>333333333333333333</li>
            <li>444444444444444444</li>
        </ol>
        <div class="demo">
            <h3>静夜思</h3>
            <ul>
                        <li><h3>床前明月光</h3></li>
            </ul>
        </div>
    </body>
</html>

6、伪类选择器

和类选择器相比，类选择器使用.class{}，伪类选择器使用:link{}

作用：用于向某些选择器天长假特殊效果。比如向链接添加特殊效果。

伪类选择器很多：链接伪类、结构伪类等。

链接伪类：

a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*伪类选择器*/
        a:link{
            color: red;/*默认样式*/
        }
        a:visited{
            color: blue;/*访问过的样式*/
        }
        a:hover{
            color: green;/*鼠标悬浮的样式*/
            font-size: 28px;
        }
        a:active{
            color: gold;/*按下鼠标不放手样式*/
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <a href="1.html" target="_blank">1.html</a>
    <a href="2.html" target="_blank">3.html</a>
    <a href="3.html" target="_blank">3.html</a>
</body>

注意：

链接伪类写的时候顺序不要颠倒，按照lvha顺序，否则可能引起错误。
因为是链接伪类，所以都是使用交集选择器a:link a:hover
因为a链接浏览器有默认样式，所以实际工作中需要给a链接单独指定样式。
实际开发中很少四个属性都用到，常用写法如下：

7、复合选择器比对

八、页面布局

1、relative（相对定位）

相对点：该元素在文档流中初始的位置
是否脱离文档流：不脱离
最佳实践：一般不移动，作为相对点

.box {
    position: relative;
    left: 100px;
    top: 200px;
}

2、absolute（绝对定位）

相对点：距离它最近的父定位元素，如果没有父定位元素，就相对于浏览器窗口
是否脱离文档流：脱离

.box{
    position: relative;
}
.box > .box1 {
    position: absolute;
    left: 0;
    top: 0;
}

3、fixed（固定定位）

相对点：浏览器视口，并且不会随着屏幕的滚动而滚动
是否脱离文档流：脱离

.box{
    position: relative;
}
.box > .box1 {
    position: fixed;
    left: 50%;
    margin-left: -150px;
}

4、伸缩盒布局（flex）

作用：与浮动布局类似，用于将一个容器中多个子元素【块元素】在一行中多列排列。常用于响应式布局（移动端）

概念：

子元素都是沿着主轴来排列的，主轴由flex-direction定义，row-x；column-y
一般建议给容器添加宽高，子元素在容器中排列

ul{
    display:flex;                     
    flex-direction: row;             
    flex-wrap: wrap;                
    justify-content: space-around;
}
ul > li{
    flex:1;
}

转自https://blog.csdn.net/lj15559275886/article/details/116353756

标签：样式,标签,border,元素,color,排版,选择器,CSS,页面
来源： https://www.cnblogs.com/hhaostudy/p/16324563.html