CSS简单个人学习笔记---中

最新推荐文章于 2024-02-16 09:45:21 发布

LTIR_752

最新推荐文章于 2024-02-16 09:45:21 发布

阅读量478

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_42918142/article/details/108843151

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS简单个人学习笔记

1. 元素显示模式
2. 侧边栏演示以及文字垂直居中——line-height = height即可
3. CSS的背景
4. 一个导航栏案例
5. CSS三大特性
6. 盒子模型
7. 浮动

1. 元素显示模式

标签以什么方式进行显示

HTML一般包含块元素与行内元素

1.1 块元素

<div> <h1-h6> <p> <ul> <ol> <li>

独占一行
高度，宽度，内外间距均可以修改
宽度默认为父类的尺寸，```
为容器，目的为存放其他内容
文字类元素内部不放其他块元素，如<p>与<h1-h6>

1.2 行内元素

也叫内联元素，除了块和几个特殊的都是<a> <strong> <em>等

一行可以存在多个行内元素
对于宽度和高度的设置无效
默认宽度为本身内容的宽度
只能容纳文本与行内元素
链接不能放链接，链接里可以放块元素

1.3行内块元素

<img /> <td> <input />

行内可以存在多个行内块元素，但是通过空白缝隙隔开。
默认宽度为本身内容的宽度
但是可以设置宽度与高度

1.4 元素显示模式的转换

希望扩大标签的触发范围，比如<a>的范围。
因为链接为行内元素，不能直接设置宽和高。
所以需要将链接<a>转化为块元素
使用display:block /inline /inline-block


<head>
    <style>
        a {
            /*行内元素转换块级元素*/
            display: block;
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
        div {
            /*块元素转换行内元素*/
            display: inline;
            background-color: springgreen;
        }
        span {
            /*行内元素转换行内块元素*/
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: tomato;
        }
    </style>
</head>

<body>
    <a href="#">a 行内元素转换块元素</a>
    <div>div 块元素转换行内元素</div>
    <span>span 行内元素转换行内块元素</span>
</body>

在这里插入图片描述

2. 侧边栏演示以及文字垂直居中——line-height = height即可

文字垂直居中——文字的行高等于盒子高度

<style>
        a {
            display: block;
            height: 50px;
            width: 230px;
            background-color: gray;
            text-indent: 2em;
            text-decoration: none;
            color: rgb(255, 255, 255);
             line-height: 50px;
            /*行高等于盒子高度，就能够做到垂直居中*/        }
        
        a:hover {
            color: wheat;
            background-color: coral;
        }
    </style>
</head>

<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">电脑 平板</a>
    <a href="#">智能穿戴</a>
    <a href="#">耳机 音响</a>
    <a href="#">健康 儿童</a>
</body>

在这里插入图片描述

3. CSS的背景

使用背景属性添加背景样式（颜色，图像，平铺位置等）

3. 1 背景颜色、背景图片、平铺方式与背景图片位置

backgroup-color背景颜色，属性：transparent透明度，color
backgroud-image一般Logo，装饰使用，相比插入图片容易控制位置
```
background-image: none/url();
```
background-repeat背景平铺属性，包含repeat平铺，no-repeat不平铺，repeat-xx轴平铺，repeat-yy轴平铺
background-position背景方位名词，x与y或者bottom/top/center/let/right/top left/ right top等。
如果为方位名词，组成词与顺序无关top left=left top，如果只设置了一个名词，如right/left，默认第二个值默认居中，水平或垂直。
也可以是精确单位，x ,y单位是像素，此时的坐标是左上角像素的坐标。缺省y的话，默认为center，如20px center
也可以是混合单位，20px center或者center 30px

<style>
    div {
        height: 300px;
        width: 300px;
        /*插入背景图片 不要忘记url()*/
        background-image: url(./lan.jpg);
        /*默认情况下平铺*/
        background-repeat: no-repeat;
        /*也可以添加back...-color 在图片后面显示*/
        background-color: rgb(163, 53, 173);
        /*背景位置，设置下部靠左*/
        background-position: bottom left;
        /*也可以是精确单位，x ,y单位是像素*/
        /*此时的坐标是左上角像素的坐标*/
    }
</style>

<body>
    <div></div>
</body>
</html>

在这里插入图片描述

3.2 大型背景图片的设置

对于Body进行背景设置即可

<style>
    body {
        /*直接将图片平铺在Body上获得最大位置*/
        background-image: url(./homora.jpg);
        background-repeat: no-repeat;
        /*水平居中，展示核心内容*/
        background-position: center top;
    }
</style>
<body></body>
</html>

3.3 大型背景图像固定（背景附着）

设置背景图片是否固定，还是随着滚轮进行滚动
background-attachment
参数scroll滚动，fix固定
代码略

3.4 背景复合写法

简化所有属性到background中进行书写。无顺序要求

3.6 背景色半透明

background: (r,g,b,a);a为不透明度，数值为0到1之间

<style>
    div {
        height: 300px;
        width: 300px;     
       /*设置透明度*/
        background: rgba(98, 72, 228, 0.1);
    }
</style>
<body>
    <div>半透明实例</div>
</body>

在这里插入图片描述

4. 一个导航栏案例

使用inline-block修饰连接
给连接设置背景图片
触碰到链接时，修改背景图片
没那么多素材就改了一个链接

<style>
        .guidance a {
            display: inline-block;
            width: 120px;
            height: 60px;
            background-color: aqua;
            text-align: center;
            line-height: 60px;
            color: white;
            text-decoration: none;
        }
        
        div {
            background: url(./lanhuaying.jpg);
        }
        
        .bg1:hover {
            background: url(./face.jpg) no-repeat center;
            color: teal;
        }
</style>
<body>
    <div class="guidance">
        <a href="#" class="bg1">导航一</a>
        <a href="#" class="bg2">导航二</a>
        <a href="#" class="bg3">导航三</a>
        <a href="#" class="bg4">导航四</a>
        <a href="#" class="bg5">导航五</a>
    </div>
</body>

在这里插入图片描述

5. CSS三大特性

5.1层叠性

相同的选择器div，设置了相同的样式color，但是取值不同red与blue。
如果发生样式冲突，执行就近原则。哪个更近执行哪个（覆盖），只覆盖冲突的元素，不冲突的样式属性仍然正常执行

5.2 继承性

子标签会继承某些父标签的样式（text-）（font-）、（line-）、（color）文字相关等、

<style>
    div {
        color: red;
        font-size: 10px;
    }
</style>

<body>
    <div>
        <p>继承测试</p>
    </div>
</body>

在这里插入图片描述

5.3 优先级

选择器相同，执行层叠性
选择器不同，按优先级执行
权重叠加：复合选择器存在权重的叠加，反正细粒度越小精度越高，其他略
继承<元素<类/伪类<ID<行内<!important声明
在这里插入图片描述

<style>
    p {
    /*!important等级最高，颜色为红*/
        color: red!important;
        font-size: 10px;
    }
    
    .class {
        color: blue;
    }
    
    #demo {
        color: darkgray;
    }
</style>

<body>
    <div>
    <!--其次优先级最高的为内部样式style，所以字体为20px-->
        <p class="cla" id="demo" style="color: chartreuse; font-size: 20px;">优先级测试</p>
    </div>

</body>

在这里插入图片描述

6. 盒子模型

6.1 盒子模型（Box Model）的组成

边框（border）盒子的边框
外边距（Margin）盒子之间的距离
内边距（padding）内容与边框的距离
实际内容（content）具体存放内容
在这里插入图片描述

6.2 边框 border

三部分组成

宽度（border-width）边框粗细，单位px，宽度会影响盒子的大小，设定为边长20px，边框2px的盒子，实际大小为24px。
样式（border-style）边框样式，见下图

在这里插入图片描述

颜色（border-color）边框颜色，默认黑色
简写（border）后接三个属性，无顺序
独立设置每条边（border-left border-top等）使用简写

<head>
	<style>
        div {
            width: 300px;
            height: 200px;
            /*只设置宽度，不可见*/
            border-width: 5px;
            /*边框样式，solid实线dashed虚线dotted点线，默认黑色*/
            border-style: dashed;
            border-color: deepskyblue;
        }
        
        .simple {
            /*简写*/
            border: red 5px solid;
        }
        
        .multiline {
            /*独立设置每条边*/
            border-top: royalblue 5px solid;
            border-bottom: springgreen 5px dashed;
            border-left: gold 3px dotted;
            border-right: purple 3px dotted;
        }
    </style>
</head>

<body>
    <div>this is a box</div>
    <div class="simple">this a simple box</div>
    <div class="multiline">set each border individually</div>
</body>

</html>

在这里插入图片描述

6.2.1 用盒子替代table的属性

如果每个边框的边均有宽度，接触时，就会宽度×2，不美观。
所以使用border-collapse合并边框，并且可以直接使用CSS调整<table>内部属性

<head>
	<style>
        table {
            width: 300px;
            height: 100px;
        }
        table,td,th {
            border: 2px brown solid;
            /*合并相邻的边框，防止边框宽度变为2倍*/
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>first</th>
                <th>second</th>
                <th>third</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述
不使用collapse

6.3 内容content与内边距 padding

盒子内容与边框的距离
padding-left/right/top/bottom设置单位px
盒子的内容(content)
该放啥放啥
复合设置
padding: 后接像素
1个值：上下左右均为此
2个值：上下为第一个值，左右为第二个值
3个值：上，左右，下
4个值：顺时针方向，上右下左
padding也会影响盒子的大小，如果上下左右的padding均为2px，盒子为正方形20px，此时的边长均为24px
不指定宽度width就不会被padding撑开了。继承自父类，即使父类有width也不会撑开

6.4 一个新的导航栏例子

通过不设置盒子长宽，使用padding构建均匀宽度的盒子。

<head>
    <style>
        div {
            height: 40px;
            border-top: 3px solid orange;
            background-color: white;
            border-bottom: lightgray 3px solid;
            line-height: 40px;
        }       
        div a {
            display: inline-block;
            /*需要设置下高度，因为不能只在字上变色*/
            height: 40px;
            font-size: 15px;
            color: gray;
            text-decoration: none;
            padding: 0px 15px;
        }      
        div a:hover {
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">导航一</a>
        <a href="#">导航栏二</a>
        <a href="#">导三</a>
        <a href="#">导航四</a>
        <a href="#">导航五导航五</a>
    </div>
</body>
</html>

在这里插入图片描述

6.5外边距 margin

控制盒子与盒子之间的边距

margin-left/top/right/bottom等，和padding一样
简写和padding完全一样，向上参考
设置盒子为水平居中，左右auto即可（块元素）。行内块元素的话话，给父元素添加text-align: center;即可
```
margin-left: auto; 
margin-right: auto;
```

6.6 嵌套边框的塌陷问题

当margin同时作用于父和子边框时，会以父子margin最大值为准进行移动。

 <style>
        .father {
            height: 150px;
            width: 150px;
            margin-top: 20px;
            background-color: lightsalmon;
        }
        
        .son {
            height: 50px;
            width: 50px;
            margin-top: 10px;
            /*要求子元素相较父元素下降10px*/
            /*但是因为父元素的Margin大于子元素，所以依旧下降20px*/
            background-color: lightseagreen;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>

</body>

事实上，二者均下降了20px

在这里插入图片描述
解决方法：

给父元素设置隐形的border
```
border-top: 1px transparent solid;
```
给父元素设置padding
```
padding: 1px;
```
给父元素设置overflow: hidden;最好，不改变盒子大小

7. 浮动

PC端的三种布局方式：

标准流（普通流）
标签按照默认规定的位置进行排列。块，行内，行内块等既定的顺序排列方式。
浮动
浮动可以改变默认显示方式，例如多个块元素横向排列。
元素会脱离网页文档，与其他元素发生重叠，但是不会与文字发生重叠。
定位

7.1 创建浮动

float: none/left/right
float用于创建浮动框，将其移动到一边，直到左边缘（窗口）或右边缘（窗口）或另一个浮动框的边缘停止。

<head>
    <style>
        .left {
            /*左浮动*/
            float: left;
            background-color: aqua;
            height: 100px;
            width: 100px;
        }    
        .right {
            /*右浮动*/
            float: right;
            background-color: aquamarine;
            height: 100px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="left">左边缘Div</div>
    <div class="right">右边缘Div</div>
</body>

</html>

在这里插入图片描述

7.2 浮动特性（※）

浮动元素脱离标准流（脱标）
浮动元素不保留原先的位置，其位置会被标准流占有，但是不会阻挡文本元素
浮动元素具有行内块元素特点。一行内的浮动元素，会随着窗口的大小进行排列调整。若放不下，会另起一行设置。

在这里插入图片描述

7.3浮动与父元素的结合使用

存在情况，当希望浮动进行横向排列，又不希望浮动影响后序的标准元素的情况下，可以为浮动元素设置父元素进行占位。

设置父元素高度与浮动元素相同
设置overflow:auto;
设置clear: left/right/both清除浮动


<head>
    <style>
        .left {
            /*左浮动*/
            float: left;
            background-color: aqua;
            height: 100px;
            width: 33%;
        }     
        .right {
            /*左浮动*/
            float: left;
            background-color: aquamarine;
            height: 100px;
            width: 33%;
        }     
        .middle {
            float: left;
            background-color: slateblue;
            height: 100px;
            width: 33%;
        }
        .father {
            height: 100px;
            /*对于三个浮动元素设置父元素的高度*/
            /*使得二者高度相同，可以起到占位的作用*/
        }
        .standard {
            background-color: red;
            height: 50px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left">左侧浮动Div</div>
        <div class="middle">中间浮动Div</div>
        <div class="right">右侧浮动Div</div>
    </div>



    <div class="standard">一个标准框</div>
</body>