css基础(4)

css基础(4)

css三大特性

层叠、继承、优先级

层叠性

指的是多种css样式叠加。
例如 :

 a {
 font-size: 16px;
}
 a {
 font-size: 18px;
}

一个属性通过两个选择器设置到同一个元素上,后面的会把前面的层叠掉。所以a标签的字体大小为18px;

继承性

子标签会继承父标签的某些样式,比如文本颜色和字号

优先级

继承样式的权重为0,行内样式优先权重为100,权重相同就遵循就近原则,!imprortant 优先级最高
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表。
从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三大特性</title>
    <style>
        /* 层叠性 */
        span,
        div {
            font-size: 16px;
        }

        span {
            font-size: 30px;
        }

        /* 继承性 */
        div {
            color: red;
        }

        /* 优先级 */
        .span1 {
            border: 1px solid green;
        }

        #span1 {
            border: 1px solid pink;
        }
    </style>
</head>

<body>
    <div>
        123

        <span class="span1" id="span1">我是一个span标签</span>
    </div>
</body>

</html>

在这里插入图片描述
属性 ———– 权重
div ul li ——> 0,0,0,3

.nav ul li ——> 0,0,1,2

a:hover —–—> 0,0,1,1

.nav a ——> 0,0,1,1

#nav p —–> 0,1,0,1
注意:不管多少个class选择器都比不上一个id,只是接近。
总结优先级:

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
总结:权重是优先级的算法,层叠是优先级的表现

盒子模型(CSS重点)

其实,css就三大模块:盒子模型、浮动、定位

盒子边框

语法:
border:border-width | | border-style | | border-color
边框属性—设置边框样式(border-style)

边框样式用于定义页面中边框的风格,常用属性值如下:

none:没有边框即忽略所有边框的宽度(默认值)

solid:边框为单实线(最为常用的)

dashed:边框为虚线

dotted:边框为点线

double:边框为双实线
表格的细线边框

table{ border-collapse: collapse; }
border-collapse: collapse;表示边框合并在一起

盒子边框总结表
左边框border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
样式综合设置border-style:上边 [右边 下边 左边];none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置border-width:上边 [右边 下边 左边];像素值
颜色综合设置border-color:上边 [右边 下边 左边];颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
设置内容样式属性常用属性值
上边框border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
下边框border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
边框综合设置border:四边宽度 四边样式 四边颜色;
圆角边框(CSS3)

border-radius:左上角 右上角 右下角 左下角;

内边距(padding)

padding属性用于设置内边距,是指边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
简写:padding:1 || 1 2 || 1 2 3 || 1 2 3 4
1个值 padding:表示上下左右边距
2个值 padding:表示上下边距 左右边距
3个值 padding: 表示上边距 左右边距 下边距
4个值 padding:表示上下左右边距

外边距(margin)

margin属性用来设置外边距,设置外边距会在元素之间创建“空白”,这段空白通常不能放置其他内容
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin: 和内边距一样

外边距实现盒子居中

可以让一个盒子水平居中,必须要满足的条件
1.必须是块元素
2.盒子必须指定了宽度
然后设置margin:0 auto;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距水平居中</title>
    <style>
        div {
            width: 249px;
            height: 249px;
            line-height: 249px;
            background-color: pink;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div>我是一个div元素 我要水平居中</div>
</body>

</html>
在这里插入图片描述

清除元素的默认内外边距

*{
margin:0;
padding:0;
}
注意:行内元素是只有左右内外边距的,没有上下边距

外边距合并

1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有上下外边距margin-top/bottom,则他们之间的margin不是margin-top和margin-bottom之和,而是两者之间的最大者,称外边距塌陷

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外边距塌陷</title>
    <style>
        div {
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
        }

        .div1 {
            background-color: pink;
            margin-bottom: 50px;
        }

        /* 他们之间的外边距为70px,是两者的最大值 */
        .div2 {
            background-color: royalblue;
            margin-top: 70px;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

在这里插入图片描述
2.嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		.father {
			width: 300px;
			height: 300px;
			background-color: pink;
			margin-top: 100px;
			/* border: 1px solid red;  解决外边距合并(塌陷)问题 */
			/* padding: 1px; */
			overflow: hidden; 
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-top: 30px;
		}
        </style>
    </head>
    <body>
    <div class="father">
    	<div class="son"></div>
    </div>
    </body>
</html>
在这里插入图片描述

解决方案:

  1. 可以为父元素定义1像素的上边框或上内边距。
  2. 可以为父元素添加overflow:hidden。
content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值。

大多数浏览器,如Firefox、IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

注意:

1、宽度属性width和高度属性height仅适用于块级元素,对行内元素无效( img 标签和 input除外)。

2、计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并的情况。

子元素在父元素里面垂直水平居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直水平居中</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .outside {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
        }

        .inside {
            height: 200px;
            width: 200px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>

<body>
    <div class="outside">
        <div class="inside"></div>
    </div>
</body>

</html>
在这里插入图片描述
盒子模型布局稳定性

优先使用 width > padding > margin
原因:
1.margin会有外边距合并
2.padding会影响盒子大小,需要进行加减计算

Css3盒模型

box-sizing: content-box || border-box
1.box-sizing:content-box 盒子大小为width+padding+border
2.box-sizing:border-box 盒子大小为width
box-sizing 如果不设置 默认的值 就是
content-box: 优先保证内容的大小 对盒子进行缩放;
border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div:first-child {
			width: 200px;
			height: 200px;
			background-color: pink; 
			box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
			padding: 10px;
			border: 15px solid red;
			/* 盒子大小为 width + padding + border   content-box:此值为其默认值,其让元素维持W3C的标准Box Mode */
		}
		div:last-child {
			width: 200px;
			height: 200px;
			background-color: purple;
			padding: 10px;
			box-sizing: border-box;   /* padding border  不撑开盒子 */
			border: 15px solid red;
			/* margin: 10px; */
			/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
		}
        </style>
    </head>
    <body>
    <div>
    	content-box
    </div>
    <div>
    	border-box
    </div>
    </body>
</html>
在这里插入图片描述
盒子阴影

text-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
在这里插入图片描述
例子:
img {
border:10px solid orange;
box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
}

浮动(float)

css的定型机制有3种:普通流、浮动和定位
语法:选择器{float:属性值;}
属性值 ———–描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
浮动首先创建包含块的概念(包裹)。就是说, 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

发表评论