CSS基础知识(盒子模型)
继承上一篇CSS的三大特性的优先级继续讲解。
1.1优先级
优先级注意点：
- 权重是有4组数字组成的，但是不会有进位。
- 可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器以此类推。
- 等级判断从左向右，如果某一位数值相同，则判断下一位。
- 可以简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器为100，行内样式表为1000，！improtant无穷大。
- 继承的权重是0,如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
如图所示：
实例：权重的叠加问题(权重虽然会叠加但是永远不存在进位的问题)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权重</title><style>/* 复合选择器会有权重叠加的问题 *//* ul 和 li 权重 为 0,0,0,1+0,0,0,1 = 0,0,0,2 *//* ul li{color: green;} */li{color:pink;}</style>
</head>
<body><ul><li>羊肉泡馍</li><li>小龙虾面条</li><li>拇指生煎包</li></ul>
</body>
</html>由此可以看出li的样式显示出来了，如果使用ul li样式选择器呢？
代码添加如下内容：
ul li{
color: green;
}
显示出来的信息，便是字体的颜色发生了改变由此我们可以知道两个元素选择器的叠加为0,0,0,2比一个元素选择器大。
如果我们给ul加一个类选择器去使用它调用li的标签改变颜色，标签颜色会发生变化吗？答案是一定的应为类选择器永远大于元素选择器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权重</title><style>/* 复合选择器会有权重叠加的问题 *//* ul 和 li 权重 为 0,0,0,1+0,0,0,1 = 0,0,0,2 */ul li{color: green;}li{color:pink;}.nast li{color:chartreuse;}</style>
</head>
<body><ul class="nast"><li>羊肉泡馍</li><li>小龙虾面条</li><li>拇指生煎包</li></ul>
</body>
</html>显示的内容如下所示：上述权重为(0,0,1,0 + 0,0,0,1 = 0,0,1,1)比单个和两个元素选择器的权重都大，所以该li的内容随着权重最大的选择器改变样式。
权重叠加：如果是复合选择器，会存在权重叠加，需要计算权重。
- 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
权重最大的样式才会被应用，而小的则会被覆盖掉，接下来我们讲述下一个重点---盒子模型。
2.盒子模型
2.1 看透网页布局的本质
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子Box。
- 利用CSS设置好盒子的样式，然后摆放到相应的位置。
- 往盒子里面装内容。
网页布局的核心本质就是利用好CSS摆放盒子。
2.2 盒子模型(Box Model)组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器，CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框(border)、外边距(margin)、内边距(padding)、和实际内容。
具体内容如下图所示：
2.3 边框(border)
border可以设置元素的边框，边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色
border ： border-width || border-style || border-color
| 属性 | 作用 |
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框颜色 |
边框样式有如下几种，重点记住solid,double,dotted即可。
代码内容如下显示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框样式</title><style>div {width:300px;height: 200px;/*border-width 边框的粗细 一般情况下都使用px*/border-width: 5px;/* border-style 边框样式 solid 实线边框 dashed 虚线边框 dotted点线边框*/border-style: solid;background-color: gray;}</style>
</head>
<body><div></div>
</body>
</html>显示效果如下所示：
border-style:dashed 效果如下图：
border-style:dotted 效果如下图：
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框简写：
border：1px sloid red; 没有顺序可言
边框分开的写法：
border-top:1px solid red 只设置上边框，其余同理
课堂要求：请给一个200*200的盒子，设置上边框为红色，其余边框设置为蓝色（提示：一定注意边框的层叠性）
课堂要求的代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框设置</title><style>div{width: 200px;height: 200px;border-top: red 2px solid;border-left: blue 2px solid;border-right: blue 2px solid;border-bottom: blue 2px solid;}</style>
</head>
<body><div></div>
</body>
</html>效果图如下图所示：
同样的可以将四个边框代码更改如下，效果仍然与上图相同：
border : bule solid 2px;
border-top: red solid 2px;
2.4 表格的细线边框
border-collaspe属性控制浏览器绘制表格边框的方式，他控制相邻单元格的边框。
语法：
border-collapse : collapse;
- collapse单词是合并的意思
- border-collapse：collapse； 表示相邻边框合并在一起
实现一个表格的内容色湖之以及边框的设置：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>细表格</title><style>table{width:500px;height: 249px;}table,td,th{border:1px solid pink;border-collapse:collapse;font-size: 14px;text-align: center;}</style>
</head>
<body><table border="1" cellspacing="0" align="center"><tr><th>排名</th><th>关键词</th></tr><tr><td>第一</td><td>我可能遇到了救星</td></tr><tr><td>第二</td><td>浮图缘</td></tr><tr><td>第三</td><td>开端</td></tr></table>
</body>
</html>实现的内容效果如下所示：
案例：今日电视剧排行榜：
代码内容如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>电视剧排行榜</title><style>table{width: 600px;height: 400px;border-color: pink;}</style>
</head>
<body><table align="center" border="1" cellpadding="3" cellspacing="0"><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关连接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td>
CSS基础知识(盒子模型)相关推荐
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
- CSS基础、盒子模型、选择器与权重
CSS基础.选择器与权重.盒子模型 一.CSS的字体属性 CSS Fonts(字体)属性用于定义字体系列,例如大小.粗细.和文字样式(斜体之类). 1.字体 CSS使用font-family属性定义文 ...
- css基础，盒子模型，选择器与权重
1.css基础 1.1css简介 css(叠层样式表)是一种标记语言 1.1.1css语法规则 选择器加声明 <style>/* 选择器{样式} *//* 给谁改样式{改什么样式} */p ...
- CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 外边距 属性设置 块级盒子水平居中 文字居中以及盒子居中 插入图片和背景图片的区别 清除元素的默认内外边距 外边距合并(只存在垂 ...
- CSS基础(part11)--盒子模型之内边距
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 内边距(padding) 属性设置 内盒尺寸计算 padding什么时候不影响盒子大小 盒子模型 内边距(padding) pa ...
- CSS基础(part10)--盒子模型之边框
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 盒子模型简介 边框(border) 边框属性 举个例子 边框综合设置 盒子边框写法总结表 边框重叠设置 盒子模型 盒子模型简介 ...
- CSS基础：盒子模型和浮动
盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子,封装HTML元素. 它包括:外边距(marg ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- 史上最全的CSS基础知识大全！
文章目录 CSS的发展历程 CSS 网页的美容师 CSS初识 CSS样式规则 CSS字体样式属性 font-size:字号大小 font-family:字体 font-weight:字体粗细 font ...
最新文章
- R语言ggplot2可视化：使用gganimate包和gapminder包为生成的动画文件gif设置尺寸、分辨率
- FTPFileUtil_FTP文件上传 （spring boot）
- Ruby和SHELL中如何遍历指定目录的文件
- BZOJ3270: 博物馆
- Windows 7 OpenGL配置
- 集成算法——Adaboost代码
- [Documentation]porting
- 161011、oracle批量插入数据
- UVA 10564 - Paths through the Hourglass (dp)
- mysql双主+keepalived【转】
- 二分法02：寻找第一个和最后一个的满足条件的位置
- WebApi2官网学习记录---Media Formatters
- 利用DeskPins软件将windows窗口置顶
- 1分钟了解微信收款商业版
- 优动漫PAINT画面上色技巧——渐变映射
- 蒙特卡洛模拟最牛的地方在哪里呢？
- 美国计算机科学奥林匹克竞赛试题,2019USAAAO美国天文奥林匹克竞赛预赛试题（答案）...
- VC中CTime和SYSTEMTIME转化
- JavaScript - 语言基础
- 解读：LED照明设备出口沙特需要什么认证？法规要求！
热门文章