目录

文章目录

前言

css是什么？

css的引入方式

选择器

字体和文本样式

选择器进阶

结构选择器

页面布局

盒子模型

浮动属性

定位属性

案例：底部半透明定位效果

综合案例：学成在线项目
总结

css是什么？

层叠文本框（后面的会覆盖前面的）

css的引入方式

（在哪里写css）

1.行内式：给块级标签中添加style属性。

2.嵌入式：使用style标签，style标签中添加css注释。

3.外联式：创建新的css页面，通过link标签连接到css页面。

选择器

作用：查找标签，设置标签样式

使用：选择器{css属性名：属性值；}

1.标签名选择器：选择所有此标签名的标签

2.类选择器：.类名{css属性名：属性值；} 所有标签都有类名，可以设置为数字字母中划线下划线，不能以数字和中划线开头，标签的类名可以重复，一个类选择器可以选择多个标签。

3.id属性值选择器：#id属性值{css属性名：属性值；}所有标签都具有id属性值，id属性值是唯一的，一个id属性值选择器只能选择一个标签。

深入探讨

一个元素可以有同时有id选择器和类选择器（id选择器的优先级高）。

一个元素只能有一个id选择器，但可以有多个类选择器。

当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准。

id选择器复用性比较低，优先级比较高，唯一使用。如果某个样式只是给某一个html元素使用，则选择id选择器；如果某个样式可能给多个html元素使用，则应当选择class选择器。

父子选择器

父子选择器可以有多级（实际开发过程中不要超过三级）。

父子选择器有严格的层级关系。

类选择器和id选择器都可以有父子选择器。

对某行个别文字使用嵌套风格时，使用父子选择器非常方便。

4.通配符选择器

字体和文本样式

1.字体大小：font-size 数字+px 浏览器默认字体大小为16px 1em

2.字体宽度：font-weight 400 bold700

3.字体样式：font-style normal italic

4.字体：font-family 微软雅黑宋体

5.复合样式：可以设置多个属性值，用空格隔开

1.文本缩进：text-index

2.文本对齐：text-align（设置大标签对齐 )

3.文本修饰：text-decoration（设置下划线）（用来清除超链接的下划线）

1.行高：line-height 行高包括上下间距和文字高度（

设置内容居中：margin：auto 0

颜色的设置：

1.十六进制表示法：#f00 2.rgba（红黄蓝三原色0-255 透明度0-1）

选择器进阶

关系选择器

1.子元素选择器：选择父元素中此标签的子元素用空格隔开

深入探讨

父子选择器

父子选择器可以有多级（实际开发过程中不要超过三级）。

类选择器和id选择器都可以有父子选择器。

对某行个别文字使用嵌套风格时，使用父子选择器非常方便。

2.包含选择器：选择父元素中包含的所有子元素用>链接

3.并集选择器：选择多组标签，设置相同的样式用逗号隔开

4.相邻元素选择器

5.兄弟元素选择器

属性选择器

1.匹配标签所有E[att='val']

2.匹配E标签有att属性属性值包含val并且以空格隔开E[att~='val']

2.匹配E标签有att属性属性值以val开头 E[att^='val']

3.匹配E标签有att属性属性值以val结尾 E[att$='val']

4.匹配标签含有att属性属性值包含val E[att*='val']

5.匹配E标签包含att属性属性值以val开头且以-隔开E[att|='val']

结构选择器

checked：匹配页面中已经选中的元素

enabled：匹配页面中处于可用状态的元素（disabled）

only-child：匹配只有一个子元素的子元素

first-child：匹配第一个子元素

nth-child（3）（2n表示偶数，2n+1表示奇数）：匹配父元素中的第3个子元素

nth-of-type（3）：匹配页面中同类型元素中的第3个同级元素

伪对象选择器

before：要和content属性一起使用，表示在此标签中插入content中的内容

超链接伪类选择器

超链接

1.link：表示超链接被访问之前的样式

2.visited：表示超链接被访问之后的样式

1.hover：表示鼠标悬停在上面的样式

2.active：表示标签被激活之后的样式

css特性

1.继承性：子承父业（文字控制属性）（a标签color属性失效 h标签font-size属性失效）

2.层叠性：不同的样式会层层叠加相同的属性会被覆盖

优先级

特性：不同选择器由不同的优先级，优先级高的选择器样式会覆盖低的样式

解决一个标签匹配多个选择器，什么样式生效

公式：继承<通配符<标签<类<id<行内式<!important(加载分号之前，不要给继承添加）（选中范围越广，优先级越第）

页面布局

元素显示模式

块级元素:独占一行，可修改宽度高度，宽度为默认父元素的宽度，高度被内容撑开<h1> <div> <p> <ol>

行内元素：不自动换行，不能设置宽高,宽度和高度都有内容撑开 <span><a><i><em>

行内块元素：一行可以显示多个，加宽高还能生效：<input><img><textarea><button>

转换：可以通过diaplay属性来转换 inline是行内元素默认属性值

(常用）block是块级元素的默认属性值,inline-block可设置为行内元素并可以修改宽度高度、行间距、对齐方式。

html嵌套注意点

1.块级元素一般作为容器，可以嵌套文本块级元素行内元素行内块元素（p标签不要嵌套p、div、h元素）

2.a标签可以嵌套任意元素标签（不要嵌套a标签）

页面模块：<header><nav><banner><content><footer>

<div>可作为容器使用，设置宽度高度之后可以作为盒子使用

背景颜色图片显示在盒子里

背景颜色 background-color 默认为透明transparent

背景图片 background-image：url（'图片路径')

背景平铺：background-repeat：repeat-x（水平平铺）no repeat（不平铺，只显示一张背景图）

背景位置：background-position 1.方位名词（可以颠倒顺序）（水平方向）right left center （竖直方向）top bottom center 2.坐标系：数字+px（不能颠倒顺序）

左上角：0 0 （表示坐标原点）x轴：水平向右 y轴：垂直向下（可设置为负值）

盒子模型

概念：页面中的每一个标签都可以看作一个盒子 css中的盒子由内容（content）内边框区域（padding）边框区域（border）

外边框区域（margin）

1.内容的宽度和高度：width height 数字+px

2.边框线：border 线条种类（实线solid虚线dashed点线dotted）宽度颜色 border-单方向设置

3.内边距：padding 数字+px 设置四个方向的边距（顺时针方向三个值左右相同两个值上下相同左右相同）

4.外边距：margin 设置方式同上

5.清楚默认内外边距：

*{
margin:0;
padding:0}

版心居中：margin：0 auto

标准流

块级元素垂直排列行内元素水平排列

浮动属性

作用：图文环绕，网页布局（快标签在一行排列）

表示：float right left center

特点：

1.浮动会脱离标准流，不在占标准流的位置

2.浮动元素优先级高于标准流，会盖住标准流元素

3.浮动标签默认顶对齐

4.浮动找浮动，下一个浮动会在上一个浮动左右

5.浮动后元素具有行内块的性质

css书写顺序（浏览器执行效率更高）：浮动盒子模型 margin padding border 宽度高度背景色文字样式

清除浮动带来的影响

1.父子级标签，父级没有设置高度，子级浮动，给父级设置高度

2.额外标签法：给父级元素添加块级元素，给块级元素设置clear：both属性（清楚左右两侧浮动的影响）

3.单伪元素清除法：给父级元素添加标签（clearfix::after content:'' clear:both 转换为块级元素）

.clearfix::after{
content：'';
diaplay:block;
clear:both;

4，双伪元素清除法：before解决外边距塌陷问题（父子级标签都是块级元素，子元素设置margin会影响父标签外边距塌陷）

.clearfix::before,.clearfix::after{
content：'';
diaplay:table;}
.clearfix::before{
clear:both}

5.给父元素设置overflow：hidden；属性

定位属性

作用：一般用于盒子层叠的情况，可以让元素自由的摆放在页面中任意位置

定位方式：position 常见属性：relative absolute fixed 设置偏移值（数字+px）（就近原则）：水平（left right）竖直（top bottom）（之选择一个设置，先参考left和top位置）

相对定位的特点：占标准流的位置，改变位置相对与原来的位置，仍保持原来的表现模式

绝对定位：先找已经定位的父级，以此为参照物定位，没有就以浏览器为参照位。脱标，不占位。改变标签原有的表现模式，具备了行内块的特点。

父级采用相对定位，子级采用绝对定位（父相子绝）

绝对定位的盒子不能采用margin：0 auto版面居中

定位居中

{
left：50%;
/*把盒子移动到中间偏右的位置/
margin-left:-150px;
/*把盒子向左移动移动到宽度一半/
top:50%;
/*把盒子移动到中间偏下的位置/
margin-top:-100px;
/*把盒子向上移动到高度的一半/

{
left:50%;
top:50%;
transform:translate(-50%,-50%)；
/位移：自己宽度高度的一半/
}

案例：底部半透明定位效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>
.banner{
poeition:relative;
width:1000px;
height:500px;
margin:0 auto;
}
.mask
{width:1000px;
/*父子集宽度一样的话，可以设置width：100%）
height:100px;
background-color:rgba(0, 0 ,0,0.5)
position:absolute;
left:0;
bottom:0;</style>
</head>
<body><div class="banner"><img scr="../" alt=""><div class="mask"></div>
</div>
</body>
</html>

固定定位：position：fixed；

特点：脱标，不占位置；参考浏览器位置，具备行内块的特点

元素的层级关系

不同布局方式元素的层级关系：标准流<浮动<定位

不同定位之间：相对绝对固定相同，写在下面的元素会覆盖上面的元素

装饰属性

1.浏览器解析行内标签和行内块标签img input当作文字处理，基线对齐（一般用于设置垂直对齐）

解决方式：可以直接转为块级元素

属性名：virtual-align 属性值：baseline top middle bottom （对齐方式）

<style>
input{
height:50px;
box-sizing:border-box;
virtual-align:middle;
}
</style>
<body>
<input typr="text"><input type="buttom" value="搜索">
</body>

2.光标类型

属性名：cursor 属性值：default（默认值，通常是箭头） pointer（小手效果，提示用户可以双击）

move（可以移动）text（文本，可以复制）

3.边框圆角

border-radius 数值+px/百分比从左上角赋值，顺时针赋值

应用：画一个正圆：盒子是正方形，边框圆角是盒子宽高的一半，border-radius：50%

胶囊按钮：盒子是长方形，边框圆角取值是高度一半

4.溢出属性名：overflow 属性值：visible （溢出部分可见）hidden scroll （显示滚动条）auto （自动显示滚动条）

5.元素本身隐藏

visibility:hidden (占位隐藏效果)display:none(无占位隐藏效果）display：block恢复元素

6.透明 opacity0-1

根目录：首页：index.html 图片文件夹：images 样式文件表：CSS

布局：从上到下从左到右，从外到内

综合案例：学成在线项目

2.读入数据

总结

div+css盒子模型相关推荐

CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型一.盒子模型二. 块级元素与行级元素✪✪✪ 块级元素行内元素转化三.导航栏的实现一.盒子模型盒子是页面内容的容器,通过盒子的堆叠.嵌套能实现网页布局各属性: 大小(wid ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
CSS:盒子模型和清除float浮动的三种常用方法
目录一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
css盒子模型_css的盒子模型是什么
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. css盒子模型又称为框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(bor ...
用php做盒子模型,什么是CSS盒子模型？一文带你了解CSS盒子模型
本篇文章给大家带来的内容是关于什么是CSS盒子模型?一文带你了解CSS盒子模型,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是CSS盒子模型网页设计中常听的属性名:内容(co ...
前端笔记 | CSS盒子模型
CSS盒子模型一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距二.特殊样式 2 ...
html 盒子写法,CSS盒子模型
CSS盒子模型 1. 盒子模型的组成 CSS盒子模型本质上是一个盒子,封装周围的HTML元素. 包括:边框border.外边距margin.内边距padding.实际内容content. 2. 边框b ...

div+css盒子模型