CSS样式（下） | 前端笔记（四）

前端学习记录之路

已于 2023-04-30 11:46:50 修改

阅读量97

点赞数 1

文章标签：前端 css html

于 2023-03-30 09:00:45 首次发布

本文链接：https://blog.csdn.net/weixin_55901142/article/details/129850459

版权

7.背景

样式	含义
background-color:transparent（默认透明）/ rgba(0,0,0,0.3)（0.3 为透明程度，越小越透明）	背景颜色
background-image:none（默认）/ 地址url(…)	背景图片
background-repeat:repeat（默认纵横平铺）/no-repeat(不平铺)/repeat-x（横）或 repeat-y（纵）	背景摆放
background-position:x坐标 y坐标（x 为左右，y 为上下，可以为数值/百分比/方位top/center/left/bottom/right）	背景位置
background-attachment:scroll（不固定,默认滚动）/ fixed（固定）	背景是否固定

备注：

1.可复合为 background：background-color background-image background-repeat background-attachment background-position 。

2.小的图片一般用背景。

3.背景位置可以混合单位（20px center）。

4.若位置只指定一个方位/数值，则另一个默认居中（right即right center）。

８.三大特性

（１）层叠性（即给相同选择器设置相同样式，则采用就近原则）

       div {
           color: red;
           font-size: 12px;
       }
       div {
           color: pink;
       }

备注：虽然color执行下面的pink，但是上面的font-size仍然生效。

（２）继承性（子承父性，继承跟文字相关的text-、font-、line-、color）

        div {
            color: pink;
            font-size: 14px;
        }        
    <div>
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>

备注：

1.儿子p会继承父亲div。

2.可直接给body指定，然后body里面就全都继承。

    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /*子元素继承了父元素body的行高1.5*/
            /*这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div的行高就是21px*/
            font-size: 14px; 
        }
        p {
            /*1.5*16=24 当前的行高*/
            font-size: 16px;
        }
        /* li没有手动指定文字大小，则会继承父亲的文字大小  body 12px  所以li的文字大小为12px 
        当前li的行高就是12*1.5=18px*/
    </style>

<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

（３）优先级

样式	权重
!important	无穷（+∞）
行内样式：style=“ ”	（１，０，０，０）=1000
id 选择器	（０，１，０，０）=100
类/伪类选择器	（０，０，１，０）=10
元素选择器	（０，０，０，１）=1
继承选择器/*	（０，０，０，０）=0

备注：

1.比较权重大小时，从左到右比较。

2.!important加在后面，即color：pink!important

3.如果一个盒子既有left（top）属性也有right（bottom）属性，则执行left（top）。

    <style>
        /* 父亲的权重是 100  */
        #father {
            color: red!important;
        }
        /* p继承的权重为 0 */
        /* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
        p {
            color: pink;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认制定了一个样式 蓝色的 有下划线  a {color: blue;}*/
        a {
            color: green;
        }
    </style>

<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>

权重的叠加：

    <style>
       /* 复合选择器会有权重叠加的问题 */
       /* 权重虽然会叠加,但是永远不会有进位 */
       /* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2  2 */
        ul li {
            color: green;
        }
        /* li的权重是0,0,0,1  1 */
        li {
            color: red;
        }
        /* .nav li 权重0,0,1,0 + 0,0,0,1 = 0,0,1,1  11 */
        .nav li {
            color: pink;
        }
    </style>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>

9.边框

样式	含义
border-width	宽度
border-style	样式，可以是 none/solid（单实线）/dashed（虚线）/dotted（点线）
border-color	颜色
border-collapse:collapse;	合并相邻边框

备注：

1.复合写法：border：1px solid red;

2.border-left/top…必须写在 border 下面。

3.直接给一个盒子加边框会加大盒子大小，解决方法：

（1）测量时不量边框；

（2）width/height减去边框宽度。

4.表格边框设置：每个单元格都设置边框

        table,
        td, th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }

10.内边距padding（边框与内容的距离）

设置	结果
padding:5px;	上下左右
padding:5px 10px;	上下左右
padding:5px 10px 20px;	上左右下
padding:5px 10px 20px 30px;	上右下左（顺时针）

备注：

1.padding-left/right/bottom/top

2.内边距会撑大盒子，width和height要减去padding；若盒子本身没指定width或者height，则不会撑大盒子大小。

11.外边距margin（盒子与盒子的距离）

设置	结果
margin:5px;	上下左右
margin:5px 10px;	上下左右
margin:5px 10px 20px;	上左右下
margin:5px 10px 20px 30px;	上右下左（顺时针）

备注：

1.margin-left/right/bottom/top

2.让块级盒子居中：指定宽度，左右外边距为 auto，例如margin：0 auto

3.让行内（块）盒子居中：给其父元素添加text-align：center。

外边距合并：

1.相邻块元素垂直外边距的合并

若上下两个盒子分别有下外边距和上内边距，则取两个里面的最大值。所以尽量只给一个盒子添加margin值。

2.嵌套（父子）块元素垂直外边距的塌陷：父子都有上外边距，则父亲会塌陷较大外边距。

解决：

1.为父元素定义上边框（border:1px solid transparent)

2.为父元素定义上内边距（padding：1px）

3.为父元素添加 overflow:hidden

备注：

1.行内元素一般只设置左右内外边距，不要设置上下，不过可以转换为块级或者行内块。

2.清除浏览器默认内外边距：*{padding：0；margin：0；}，放在CSS里面第一句。

12.圆角边框

border-radius(外边框圆角):length即半径(数值或百分比)

border-radius:10px 5px 10px 5px(左上右上右下左下）

border-top-left-radius:…

备注：

1.若要全圆，则length为高或宽的一半，或者直接50%。

2.圆角矩形：length为高度的一半。

13.盒子阴影box-shadow

属性	含义
h-shadow	水平阴影（有正负值，越大越往右/下)
v-shadow	垂直阴影
blur	模糊距离（越大越模糊）
spread	尺寸（影子的大小）
color	颜色一般用rgb（0，0，0，0.3）
inset	内部阴影(默认outset，不过outset不能写出来)

备注：

1.盒子阴影不占空间。

2.复合：box-shadow : h-shadow（必须） v-shadow（必须） blur spread color inset；

3.text-shadow（文字阴影）: h-shadow v-shadow blur color;

14.网页布局三大方式

三种方式：标准流、浮动、定位

备注：

1.标准流就是块级元素占一行，从上往下；行内元素从左到右，碰到边缘换行。

2.第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。（先用标准流的父元素排列上下位置，然后内部子元素浮动排列）

15.浮动float

1.定义：

浮动就是创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含或另一个浮动框的边缘，使得多个块级元素一行排列显示。

2.写法：

float:none/left/right（先用标准流父元素排列上下位置，再用内部子元素浮动排列左右位置）

3.特点：

（1）脱离标准流的控制移动到指定位置（脱标）。

（2）浮动的盒子不再保留原先位置。

（3）浮动的元素会一行内显示且顶部对齐，一行内装不下会另外起一行。

（4）浮动元素有行内块特性，给行内元素或块级元素加浮动之后不用再转换为行内块元素。

备注：

1.浮动的盒子不会有外边距合并的问题。

2.先设置大小，再设置位置。

3.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

4.一浮全要浮。

4.清除浮动：

1.问题：

父亲盒子不方便给高度，孩子浮动，脱离原文档流位置（父亲高度为 0，下盒子移到下侧），对后面的排版有影响。

2.本质：

（1）清除浮动元素的影响；

（2）若父盒子有高度，则不需要清除浮动；

（3）子盒子会变化，所以父盒子不方便给高度，所以要清除浮动，父亲会根据浮动的子盒子自动检测高度，则不会影响下面的标准流。

2.清除浮动方法：

clear:left/right/both（一般都用both）

1.额外标签法（隔墙法）：

策略：闭合浮动，即在浮动元素末尾添加空标签（必须是块级元素）

        .clear {
            clear: both;
        }

<div class="clear"></div>

2.父级添加 overflow:hidden/auto/scroll

3.:after 伪元素法

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

4.双伪元素法

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

备注：导航栏可以用ul包含li和链接a的做法，可以不给宽度，要给a加padding值。

16.页面布局思路

1.思路

确定页面版心（测宽）
分析行模块及行中列模块
列模块浮动布局，先确定每列大小，再确定列的位置
Html
布局结构

2.css书写顺序

布局定位属性：display/position/float/clear/visibility/overflow
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他：content/curson/border-radius/box-shadow/text-shadow/background

17.定位position

1.定义：

让盒子自由在某个盒子内移动位置或者固定在某个位置，且压住其他盒子。

定位（position）=定位模式+边偏移（top/bottom/left/right)

2.定位种类

方式	写法	含义
静态定位	position：static	无定位，标准流
相对定位	position：relative	相对于它原来的位置，原来在标准流的位置继续占有，不脱标
绝对定位	position：absolute	相对于最近一级的有定位的父元素位置，不占原位置
固定定位	position：fixed	以可视窗口为准移动，页面滚动不变，不占原位，跟父盒子无关
粘性定位	position：sticky	以可视窗口为准，占原位，必加 top/bottom/right/left其中一个

备注：

1.相对定位：top：80px即为距离父元素顶部80px，也就是反向移动。

2.绝对定位：脱标，会飘起来，会被其他盒子占用；若无祖先，则以浏览器为准。

3.绝对定位：子绝父相（子使用绝对定位（可放父盒子任何一个地方，不影响其他兄弟），父亲需要相对定位才能让子在父亲里面）（子不占原位，父站原位）

4.固定定位要固定在版心右侧的算法：left:50%，然后margin-left:版心宽度的一半

5.固定定位是一种特殊的绝对定位。

6.粘性定位是相对定位和固定定位的混合。

3.定位叠放次序

（1）问题：

盒子重叠，可用z-index控制盒子前后次序。

（2）语法：

选择器{ z-index:1;}

备注：

1.数值可以是正整数、负整数或者0，不能加单位，默认是auto，数字越大，盒子越靠上。

2.若z-index相同或者没有指定时，则按书写顺序，后来者居上。

3.只有定位的盒子才有z-index属性。

4.拓展

1.绝对/固定定位的盒子居中，不能通过margin：0 auto水平居中。

水平居中的算法：left：50% margin-left：负的盒子宽度的一半

垂直居中的算法：top：50% margin-top：负的盒子高度的一半

2.浮动只会压住下面标准流盒子，不会压住盒子里面的文字和图片，以为浮动的目的是文字环绕。绝对定位或固定定位会压住下面标准流所有内容。

以后继续更新笔记，关注我，不要丢下我。

前端学习记录之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式（下） | 前端笔记（四）

浮动就是创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含或另一个浮动框的边缘，使得多个块级元素一行排列显示。让盒子自由在某个盒子内移动位置或者固定在某个位置，且压住其他盒子。定位（position）=定位模式+边偏移（top/bottom/left/right)
复制链接

扫一扫