山西农业大学20240924

Jia_dongyao

已于 2024-09-25 09:37:46 修改

阅读量626

点赞数 24

分类专栏：山西农业大学文章标签： css

于 2024-09-24 11:23:14 首次发布

本文链接：https://blog.csdn.net/2401_86991268/article/details/142476244

版权

山西农业大学专栏收录该内容

35 篇文章 2 订阅

订阅专栏

一. 选择器(续)

1. CSS优先级

读取顺序, 相同的选择器, 渲染相同的属性,但是值不同, 会按照读取顺序,后声明的样式优先, 但不同属性不会受到影响

div{
	color:red;
	font-size:24px;
}
div{
	color:yellow;
	background-color:pink;
}

指定大于继承: 在css样式中,有一些属性是具有继承性的, 如: 字体颜色, 字体大小, 字体样式等; 如果制定了该元素样式, 那么继承的样式会被覆盖

.word{
   color: green;
}
.sp{
   color: pink;
}

.word>.sp  -- 嵌套关系

权重值: id权重值100 > 类选择器权重值 10 > 元素选择器权重值 1
权重值累加之后做比较

	   .d1{
            color:red;
            font-size: 28px;
        }
        #d{
            color:yellow;
            background-color: pink;
        }
        /*权重值的累加*/
        .word .sp{color: orange;}  /*权重值: 20*/
        .word span{color:blue;} /* 权重值: 11*/

内联样式 > 内部样式和外部样式

二. 尺寸和边框

1. 宽度和高度

元素的尺寸实际上就是设置宽度和高度
width: 宽度
height: 高度
取值: 数值+单位

1.1 尺寸单位

css中, 只有0可以不加单位, 其他的尺寸都要添加单位
px : 像素, 绝对单位, 在PC端使用
% : 指父元素尺寸的百分比, 相对于父元素的宽度

注意: 当父元素是body的时候, body默认高度是无限的,元素的高度不能用百分比

em: 以父元素的取值为一个基本单位, 1em = 父元素的取值

10px === > 1em=10px 2em=20px 3em = 30px;

rem: 以html的取值为一个基本单位, 1rem = html的取值

页面中默认 1rem = 16px;

1.2 html中允许设置尺寸的元素

块级元素	行内元素	行内块元素
设置尺寸有效	设置尺寸无效	设置尺寸有效
div,p,ul,li, h1-h5	span,i,b,s,u,sel,ins	img, input,button
默认宽, 父元素宽度100%;不设置高, 默认高度: ① 没有内容,高度为0②有内容,高度被内容撑开	默认宽度和高度靠内容撑开	一般有自己默认宽高, img图片:默认宽高是图片的大小; button和input都有自己的默认宽高, 一般需要重新修改; 行内块元素的宽度和高度都可以设置

1.3 颜色取值

颜色值应用非常广泛, 如: 背景色, 字体颜色, 边框颜色, 阴影, 渐变 …

英文单词: red; blue; yellow; green; transparent “透明色”
十六进制颜色值 #rrggbb — 不区分大小写

取值范围: 0-9 a-f
取值: rr 红色范围 gg绿色范围 bb 蓝色范围
举例: #ff0000 — 红色 #00ff00 — 绿色 #0000ff—蓝色
#ffffff — 白色 #000000— 黑色
缩写: 每两个色值一样,可以只写一个: #f00 — 红色 #0f0—绿色

rgb()色值

rgb() 是一个函数, r代表红色, g代表绿色, b代表蓝色
括号里有传递三个参数, 参数取值范围:0-255之间的数值
eg: rgb(255,0,0) — 红色 rgb(0,255,0) — 绿色 rgb(0,0,255) — 蓝色
rgba() : a指透明度, 取值范围0-1; 0 :完全透明, 1完全不透明

2. 边框

边框在元素的外层, 宽度和高度的外面, 一般的元素没有边框, 但是个别元素自带边框: input, button…

2.1 边框的组成

边框宽度: border-width
边框样式: border-style: solid 实线; dashed 虚线; dotted:点状线,double:双实线
边框颜色: border-color
简写: border: 宽度样式颜色; (空格不能省略)

2.2 边框的方向

边框的四个方向可以分开写:
border-top: 上边框
border-right: 右边框
border-bottom: 下边框
border-left: 左边框

2.3 去除元素的边框

border: 0; 将所有的边框都去掉
input, button标签常可能去掉边框

2.4 边框的倒角

将元素的直角倒成圆角
border-radius: 数值+单位; 设置四个角的圆角

单角的圆角
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-right-radius: 右下角
border-bottom-left-radius: 左下角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的边框</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            border: 5px solid #f00;
            border-top-left-radius: 0;
            border-top-right-radius: 80%;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 80%;
        }
        .btn{
            width: 98px;
            height: 50px;
            border: 0;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <button class="btn">普通按钮</button>
</body>
</html>

三. 内外边距和盒子模型

1. 内边距

padding: 宽度和高度以外,边框以内的部分

1.1 语法

padding: 数值+单位; 数字不能是负值
内边距会使元素扩大, 内边距占据元素的颜色

1.2 方向

内边距有四个方向,分别是: 上右下左内边距

padding-top:10px;
padding-right:10px;
padding-bottom: 10px;
padding-left: 10px;

1.3 简写

1个值: padding:20px ; 四个方向都一样
2个值: padding:20px 20px; 上下左右
3个值: padding:20px 20px 20px; 上左右下
4个值: padding:20px 20px 20px 20px; 上右下左

1.4 特点

在标准的盒子模型中, 内边距是占据元素空间的, 增加内边距会让整个元素变大
会影响页面的布局

2. 外边距

外边距指的是元素与其相邻的兄弟元素之间的距离,位置在元素的边框以外, 因为不属于元素本身,所有不会拥有元素的颜色

2.1 语法

margin: 数值+单位; 数值可以是负值
特点: 以元素的左上角为原点, 一切以左上角开始

2.2 方向

内边距有四个方向,分别是: 上右下左内边距

margin-top:10px;
margin-right:10px;
margin-bottom: 10px;
margin-left: 10px;

2.3 简写

1个值: margin:20px ; 四个方向都一样
2个值: margin:20px 20px; 上下左右
3个值: margin:20px 20px 20px; 上左右下
4个值: margin:20px 20px 20px 20px; 上右下左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .d1{background-color: red;}
        .d2{
            background-color: green;
            /* 取值为正, 元素向下移动; 取值为负,元素向上移动*/
            margin-top: 10px;
            /* 取值为正, 相邻元素向下移动 ; 取值为负, 相邻元素向上移动   */
            margin-bottom: 50px;
            /* 取值为正,元素向右移动; 取值为负,元素向左移动   */
            margin-left:-50px;
            /* 取值为正,相邻元素向右移动; 取值为负值, 相邻元素向左移动   */
            margin-right:10px;
            
            /*总结: 上左外边距移动自己, 右下边距挤开兄弟*/
        }
        .d3{
            background-color: orange;
            /* display: 元素的显示方式
               inline-block: 以行内块方式显示(既可以设置宽高, 有可以在一行内显示)
            */
            display: inline-block;
            margin-right:-50px;
        }
        .d4{background-color: blue;display: inline-block ;}
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
</body>
</html>

2.4 外边距四个方向的移动

/* 取值为正, 元素向下移动; 取值为负,元素向上移动*/
margin-top: 10px;
/* 取值为正, 相邻元素向下移动 ; 取值为负, 相邻元素向上移动 /
margin-bottom: 50px;
/ 取值为正,元素向右移动; 取值为负,元素向左移动 /
margin-left:-50px;
/ 取值为正,相邻元素向右移动; 取值为负值, 相邻元素向左移动 */
margin-right:10px;
/总结: 上左外边距移动自己, 右下边距挤开兄弟/

2.5 自带外边距的元素

body 自带上下左右 8px的外边距
ul, ol, p, h1-h6 都有外边距

做项目时2,一般要让元素使用我们自己设置的样式,所以我们会将默认内外边距清零
*{
margin:0;
padding:0;
}

2.6 margin的auto属性值

margin:auto; 指的是块级元素在其父元素左右两侧外间距一样, 就是在父元素中水平居中

<style>
	.father{
            width: 100%;
            height: 200px;
            background-color: red;
            border-top: 1px solid #000;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: #8EE1FF;
            margin:50px auto;
        }
</style>
<!--    margin:auto-->
<div class="father">
     <div class="son"></div>
</div>

2.7 外边距合并现象

当两个元素垂直相邻, 两个元素都有外边距, 并且渲染的是两个元素之间的距离, 以最大值为显示效果

<style>
	    .d2,.d3{width: 200px;height: 200px;}
        .d2{background-color: green;margin-bottom: 50px;}
        .d3{background-color: orange; margin-top:100px;}
</style>
<body>
	<h2>元素外边距合并现象</h2>
    <div class="d2"></div>
    <div class="d3"></div>

</body>

2.8 外边距重叠效果

父级元素的第一个块级子元素和最后一个块级子元素, 都会和父元素的上下边重合, 因此: 当第一个子元素或者最后一个子元素有上下外边距时, 因为贴合父元素导致发生移动的不是子元素而是父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距重叠效果</title>
    <style>
        .father{
            width: 100%;height: 600px;background-color: red;
            /*border-top:1px solid #000;*/
        }
        .son1,.son2,.son3{width: 200px;height: 200px;}
        /*由于子元素上边与父元素上边重合,所有移动的不是子元素, 而是父元素*/
        .son1{background-color: #8EE1FF;margin-top:50px;}
        .son2{background-color: orange;}
        .son3{background-color: green;}
        /*解决方式:给父级添加伪类 */
        .father::before{
            content: "";
            display: table;
        }
    </style>
</head>
<body>
    <div class="father">
<!--        <table></table>-->
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>
</html>

2.9 元素分类

块级元素: 可以设置四个方向的外边距, 并且生效
行内元素: 上下外边距不生效, 左右外间距生效
行内块元素: 可以设置四个方向的外边距, 并且生效

3. 盒子模型

标题
最内部: 内容(宽度和高度) – 蓝色区域
内边距: padding四个方向 – 淡绿色区域
边框: border四个方向 – 蛋黄色区域
外边距: margin四个方向 — 橙色区域

标准盒子模型中:
元素的宽度: 元素左右外边距 + 左右边框 + 左右内边距 + 内容宽度
元素的高度: 元素上下外边距 + 上下边框 + 上下内边距 + 上下高度
怪异盒子模型:
box-sizing : border-box;

<style>
	.box{
            width: 100px;height: 85px;border:1px solid #000;
            padding:10px;
            box-sizing: border-box;
        }
</style>
<h2>怪异盒子模型</h2>
<div class="box">
     文字文字文字文字文字文字文字文字文字文字文字文字
</div>