div+css盒子模型

 

• 目录

  文章目录

  前言

  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.读入数据

 

---

总结