标签：复习 元素 基础 height width background div border css
------------恢复内容开始------------
------------恢复内容开始------------
由于html写样式代码可重用性低可维护性差
我们得使用css中的选择器进行元素编辑设计
css（Sascading Style Sheets）层叠样式表
2、写在head头部（内部样式表）
<style>
/*
选择器{
属性名:属性值;
属性名2:值2;
...
}
*/
p{
color: red;
}
</style>
选择器优先级：
！important最高级别
内联样式表（写在头部的选择器）
外联样式表（通过link标签在外部引入的css文件）
/*（内联样式表和外联样式表优先级一样的情况下，遵循就近原则，注：须知就近原则使用情况很少，应以选择器优先级作为主要判断方法）*/
继承过来的样式级别最低
选择器：
匹配页面中指定的元素
1、 * 通用选择器 功能 匹配页面中所有的人 (慎用)
2、 div 元素选择器 匹配页面中指定的元素
3、 # id选择器 匹配页面中指定的id 唯一性
4、 . 类选择器 匹配页面中所有的class的值的元素
类选择器 支持 分类和多类的写法 详情看下面的案例
/* 选择器 找指定的元素*/
/* * 通用选择器 功能 匹配页面中所有的人*/
*{
font-size: 26px; /*修改字体的大小*/
}
/*元素选择器 匹配页面中指定的元素*/
div{
color: red; /*页面中所有的div字体变红*/
}
/* id选择器 匹配页面中指定的id 唯一性 */
#chuan{
color: yellow; /*找id叫chuan的元素 修改颜色*/
}
/* 类选择器 匹配页面中所有的class的值的元素 */
.bgc{
background: #FF5741;
}
.abc{
border:5px solid green; /*一个像素的边框*/
}
/*分类的写法 */
div.abc{ /* 匹配的是必须是div中类名为abc的元素*/
border:5px solid deeppink;
background: #0ACD37;
}
</style>
</head>
<body>
<div>锄禾日当午</div>
<p id="chuan">床前明月光</p>
<h1>鹅 鹅 鹅</h1>
<div class="abc">疑是地上霜</div>
<p>疑是银河落九天</p>
<!--多类的写法 一个元素是可以划分不同的类的 -->
<h2 class="bgc abc" >离离原上草</h2>
<h3 class="bgc" >一岁一枯荣</h3>
群组，后代 子代
<style>
/*h1{
color: red;
}
.abc{
color: red;
}
div{
color:red;
}*/
/* 群组选择器 匹配多个选择器 */
h1,.abc{
color: red;
}
/* 子代选择器*/
.parent>p{ /*当前parent下的所有的子代的p*/
color: #FF5741;
}
/* 后代选择器 */
.parent p{ /*包含子代的 所有的后代元素 */
background: #0ACD37;
}
</style>
</head>
<body>
<div>锄禾日当午</div>
<p class="abc">床前明月光</p>
<h1>鹅 鹅 鹅</h1>
<div class="parent"> 李渊
<div>1李建成</div>
<div>2李世民
<div>李治</div>
<p>李公主</p>
</div>
<div>3李元吉</div>
<div>4李元霸</div>
<p>5李白</p>
</div>
选择器优先级具体权重：
权重 值越大 优先级越高
#id 100
.class 10
div 元素 1
通配符* 0
继承过来的样式 空
<style>
/* 权重 100 */
#aa{
color: pink;
}
/* 1*/
div{
color: red;
}
/*0*/
*{
color: yellow;
}
/* 10*/
.box{
color: green;
}
/* 支持累加
1+10=11
*/
div.box{
color: blue;
}
</style>
</head>
<body>
<!--最后是 粉红色 -->
<div id="aa" class="box">我该听谁的</div>
伪类选择器
和鼠标有关
<style>
/*超链接 没有点击之前的状态*/
a:link{color: green;}
/*鼠标移入 重点66 */
a:hover{background: #284E7C;}
/*单击 鼠标没有释放时 */
a:active{color: yellow;}
/*访问过后的*/
a:visited{color: pink;}
/* 获取焦点时 */
input:focus{background: red;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下下</a>
<input type="text">
溢出处理
情况: 大的盒子装进小的盒子 装不下才有可能溢出
应用:
1、元素的溢出处理
2、外边距溢出，浮动问题
<style>
div{
width: 200px;
height: 200px;
background: red;
/*处理溢出问题*/
/*overflow: auto;*/ /*如果有溢出就显示滚轮 没有就不显示*/
/* overflow: hidden; */ /*溢出就隐藏起来*/
/*overflow: scroll;*/ /* 不管是否溢出 都有滚动条*/
overflow-x: auto; /*如果水平溢出 就自动*/
overflow-y: hidden; /*垂直溢出就 隐藏*/
}
</style>
</head>
<body>
<!--
大的盒子装进小的盒子 装不下才有可能溢出
-->
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque cum dolorem error ex magnam obcaecati quis quo ratione sint, vero! Dolorem eius eum illum iure molestiae nulla sequi tempora vel! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem cumque fuga illum ipsa odio officia perspiciatis, quia. Deserunt distinctio impedit, itaque maiores modi mollitia nemo ratione sint sit vel!
</div>
<h1>我是文字</h1>
1、边框
边框属性 :
width 宽度
style 样式
none不要 solid实线 dashed 长点虚线 dotted 圆点虚线 其他自己控制台查看
color 颜色
可以拆分写:
按方向拆分 border-方向
border-top:10px solid red;
还可以继续拆分 ex:边框的上边的颜色
border-top-color: #0ACD37;
<style>
div{
width: 200px;
height: 200px;
/*边框属性 : width style color */
/* border: 1px solid red; */ /*简写*/
/*拆分写 */
border-width: 1px;
/* dashed 长点虚线 dotted 圆点虚线 其他自己控制台查看*/
border-style: solid;
border-color: red;
}
p{
width: 200px;
height: 200px;
/*按方向拆分 border-方向*/
border-top:10px solid red;
border-right:none;
border-bottom:2px solid yellow;
border-left:5px solid black;
/* 还可以继续拆分 ex:边框的上边的颜色*/
border-top-color: #0ACD37;
}
</style>
</head>
<body>
<div></div>
<p></p>
边框角度
border-radius:
拆分写: border-top/bottom-left/right:xxx
注意: 可以分开写多个值
border-radius: 10px 20px;
/* 角度实现 */
div{
width: 100px;
height: 100px;
border:1px solid red;
/*边框角度属性*/
/*border-radius: 10px; */ /*值越大 弧度越明显*/
/*圆的写法 50%;*/
/*border-radius: 50%;*/
/*拆分写 border-top/bottom-left/right:xxx*/
border-top-right-radius: 20px; /*右上角的弧度 */
border-bottom-right-radius: 20px; /*右下角的弧度 */
}
三角形实现
/*三角形实现*/
p{
width: 0;
height: 0;
/*默认四个方向都给透明色*/
border:10px solid transparent; /*透明色*/
/* 希望要哪个方向的三角形 就给对应的颜色即可*/
border-top-color: #0ACD37;
}
轮廓
/*轮廓 和边框的属性是一样的 属于边框之外的内容*/
/*outline: 2px solid red; !*属性不需要管 基本上给的都是none *!*/
最常见的写法
outline: none; /*搜索框 都是要去掉轮廓*/
工具设置之 修改模板
边框阴影
box-shadow: 水平位移 垂直位移 阴影大小 [模糊面积] 颜色 [inset];
<style>
body{
background: #F5F5F5;
}
div {
width: 200px;
height: 300px;
background: #ffffff;
}
/*鼠标移入效果*/
div:hover{
/* 阴影属性*/
/*值1: 阴影的水平位置 正值往右 */
/*值2: 阴影的垂直位置 正值往下 */
/*值3 模糊的大小 值越大越模糊*/
/*值4 阴影的面积 可以省略不写*/
/*值5 颜色*/
/*值6 inset 可以省略不写 */
box-shadow: 0px 0px 20px 0px #3b3737 inset;
/*box-shadow: 0 15px 30px #ccc inset ;*/
}
</style>
</head>
<body>
<div></div>
2、外边距margin
元素和元素之间的距离
用处: 将2个盒子之间的距离 隔开
语法:
margin: 值； 具体语法看下面案例
<style>
div{
width: 200px;
height: 200px;
border:1px solid red;
}
.d1{
/* 外边距*/
margin:20px;
}
/* 2个人之见的外边距取最大值 30px*/
.d2{
/*简写 */
margin: 30px; /* 上下左右4个方向都有30px的空白间距*/
margin: 30px 40px; /*上下是30 左右是40*/
margin: 30px 40px 50px; /*30上 40左右 50下 */
margin: 30px 40px 50px 60px; /*30上 40右 50下 60左 顺时针*/
/*拆分写*/
margin-top: 30px;
margin-right:40px;
margin-bottom: 50px;
margin-left: 60px;
}
</style>
</head>
<body>
<div class="d1">媳妇</div>
<div class="d2">我 </div>
</body>
套路
margin:0 auto; 整个元素 整体的水平居中（设置了宽高小于屏幕宽度）
text-align: center; 当前元素下的内容 水平居中显示
line-height: 100px; 文本垂直居中
<style>
div{
width: 200px;
height: 100px;
border:1px solid red;
/* 整个元素 整体的水平居中*/
margin: 10px auto; /*上下给具体的间距 左右居中*/
/* 当前元素下的内容 水平居中显示*/
text-align: center;
/*文本垂直居中 行高和元素的高度一样 就居中*/
line-height: 100px;
}
</style>
</head>
<body>
<div>我要居中</div>
外边距注意问题
注意:父元素如果没有给边框 子元素设置上外边距 直接作用到父元素身上
<style>
/*坑 */
/* 父元素如果没有给边框 子元素设置上外边距 直接作用到父元素身上 */
div.p{
width: 500px;
height: 500px;
background: red;
/*办法1 给父元素加边框 问题:父元素变大 有边框的缝隙*/
/*border:1px solid transparent;*/
/*方法2溢出属性 可以解决 90%可以解决 某些特殊情况 无法直接使用溢出*/
/*overflow: auto;*/
}
div.s{
width: 100px;
height: 100px;
background: black;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="p">
<!-- 方法3 给父元素下第一个孩子 设置为空的table 问题:html结构上多了空元素-->
<table></table>
<div class="s"></div>
</div>
3、内边距padding
定义: 内容和盒子边缘之间的距离
作用: 撑起元素的宽高 也会占据页面的空间
语法:
padding：值;
<style>
div{
/*border:1px solid red;*/
background: red;
width: 200px;
height: 60px;
/*内边距 语法上和margin是一样的*/
padding: 10px; /*上下左右 都是10*/
padding: 10px 20px; /*10上下 20左右*/
padding: 10px 20px 30px; /*10上 20左右 30下*/
padding: 10px 20px 30px 40px; /*10上 20右 30下 40左*/
}
</style>
</head>
<body>
<div>隔壁老徐</div>
</body>
盒模型(box-model)
一个元素/标签在页面中占据的空间大小
整体=内容+边框+内边距+外边距（公共的部分）
注意: 单纯的一个元素的宽度计算
这个div占页面的空间计算
总宽度=width+左右2个border+左右的padding
总高度=height+上下的border +上下的padding
但是如果是整体的页面布局 则需要考虑 margin 是属于2个盒子公共的组成
box-sizing: 用来设置元素的大小计算方式
1、content-box 默认值
特点 只要修改添加 /边框内边距 都会影响当前元素的宽高
2、border-box
固定当前盒子的宽度为 设置的width属性宽度 总宽度=直接设置的width=(width+border+padding)
<style>
/* 默认的盒模型计算方式
这个div占页面的空间计算
总宽度=width+左右2个border+左右的padding
总高度=height+上下的border +上下的padding
但是如果是整体的页面布局 则需要考虑 margin 是属于2个盒子公共的组成
*/
div.d1{
width: 100px;
height: 100px;
border:10px solid red;
padding: 20px;
margin:10px;
/* 总宽度是 160 总高度也是160px*/
/*盒模型默认的计算方式
特点 只要修改添加 边框内边距 都会影响当前元素的宽高
*/
box-sizing: content-box;
}
.d2{
width: 100px;
height: 100px;
border:1px solid red;
padding: 20px;
margin:10px;
/* 设置盒模型的计算方式*/
/*固定当前盒子的宽度为 设置的width属性宽度
总宽度=直接设置的width=(width+border+padding)
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="d1">我是文字</div>
<div class="d2">我是文字</div>
文本字体
font-size:10px;字体大小
font-family：songt（支持中文例如：宋体）字体样式
font-weight：bold；字体粗细
font-style：italic；
font-Variant：all-petite-cops；字体大小写转换
阿里矢量图标库：
1、进入官网
2、注册
3、将自己想要的图标 加入购物车
4、下载源码
5、导入源码文件 <link rel="stylesheet" href="源码文件路径">
6、添加指定图标类名 例如：
<div class="inconfont icon-ditu my_font"></div>
须知添加图标类名要加上基础类名inconfont否则图标出不来
颜色：
只需要记住color：rgba(0,0,0,0.3)前三个值是三原色最后一个是透明度
透明度指令opacity：0~1；
背景：
background-color:
背景颜色
background-size:
背景大小
background-image:
背景图片导入
background-repeat:
背景图片是否平铺如何平铺
background-position:
背景图片位置
background-attachment:
背景样式取值如下表
| 值 | 描述 |
|---|---|
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| initial | 设置该属性的默认值。 阅读关于 initial 内容 |
| inherit | 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容 |
除背景大小外其他均可简写
background:red url("图片文件路径") no-repeat 10px 10px；
许多网站的小图标是从一张大图里抠出来的具体抠图方法
4、情况2 多个小图的大图中 只显示一个小图标
实现步骤：
<style>
div{
/*步骤1 先去量取指定的图标的宽高*/
width: 15px;
height: 15px;
border:1px solid red;
/*步骤2 引入图片*/
background: url("img/11.png") no-repeat ;
/* 步骤3 量取宽高 :当前小图标距离大图左上角的位置 也就是背景定位的值
记住: 只要是大图中的小图标实现 背景的定位一定是负值
*/
background-position: -110px -19px;
}
</style>
</head>
<body>
<div>
</div>
线性渐变
background-image: linear-gradient(角度,颜色 位置,颜色2 位置2,颜色3 位置3);
径向渐变
background-image: radial-gradient(半径大小 at 圆心位置x 圆心位置y,颜色 位置,颜色2 位置2,颜色3 位置3);
背景剪切
<style>
div{
height: 600px;
background: url("img/b.jpg") no-repeat;
background-size: cover;
/*color: transparent;*/
font-size: 180px;
text-align: center;
line-height: 600px;
/* 前缀 兼容性 背景的图片剪切 */
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent;*/
}
</style>
</head>
<body>
<div>I LOVE YOU</div>
流水布局: 从上到下 从左到右的顺序
默认 块级元素独占一行 可以随意的修改宽高和设置上下外边距
行内元素共享一行 不可以
浮动
特点:
1、脱离原有的屏幕 飘在空中，原有的位置不再占据了
2、下一行的元素 就会自动的上移
3、块级元素的宽高就变为自适应了(宽原本默认是100%)
4、浮动只能停靠在当前行的左边或者是右边，不能跨行浮动
语法:
float:
left;靠左浮动
right;靠右浮动
none;不浮动
<style>
/*
1、脱离原有的屏幕 飘在空中，原有的位置不再占据了
2、下一行的元素 就会自动的上移
3、块级元素的宽高就变为自适应了(宽原本默认是100%)
4、浮动只能停靠在当前行的左边或者是右边，不能跨行浮动
*/
div{
width: 200px;
height: 200px;
}
.d1{
background: red;
/* 浮动操 作*/
float: left; /*靠左浮动*/
}
.d2{
background:yellow;
/*靠右浮动*/
float:right;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
问题
浮动之后 下一行元素自动上移 这样对原本的结构造成了影响
解决:
clear: both; 清除浮动
注意: 谁受影响就给谁加， 清除浮动和自己浮动不会冲突
<style>
div{
width: 200px;
height: 200px;
}
.d1{
background: red;
/* 浮动操 作*/
float: left; /*靠左浮动*/
}
.d2{
background:yellow;
/*靠右浮动*/
float:right;
}
/* 问题: 上一行浮动 会对下一行造成影响 下一行自动上移 */
.d3{
background: blue;
/*解决 : 清除浮动 下面的元素不会上移 理解为 用一堵墙拦住了 */
clear: both;
/* 自己是可以浮动的 没有冲突 */
float: left;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
补充特点:
1、文本不会因为浮动上移
2、块级元素浮动之后 宽高自适应
3、行内元素浮动之后 直接修改为了块级元素 可以设置宽高 可以设置上外边距了
<style>
a{
width: 200px;
height: 100px;
border:1px solid red;
/*只要使用浮动 无论什么元素 下一行都上移*/
float: left; /*浮动之后 行内元素可以修改宽高*/
margin-top: 100px; /*可以设置上外边距了 */
}
div{
height: 50px;
background: red;
}
</style>
</head>
<body>
<a href="">百度一下</a>
<div></div>
父元素高度塌陷问题
原因: 子元素浮动 脱离当前屏幕 如果父元素是没有给固定高度的 那么就高度为0
<style>
/* 重要*/
.p{
background: red;
/*解决1: 添加高度 问题:必须知道具体的高度 */
/*height: 100px;*/
/*解决2: auto 问题: 特殊情况下 无法使用*/
/* overflow: hidden;*/
/*解决3 父元素自己浮动 问题: 宽高自适应 下一行上移了*/
/* float: left;*/
/*4 给父元素的末尾添加一个空的块级元素 设置清除浮动属性*/
}
.s{
width: 100px;
height: 100px;
background: black;
/*子元素浮动 脱离当前屏幕 如果父元素是没有给固定高度的 那么就高度为0 */
float: left;
}
</style>
</head>
<body>
<div class="p">
<div class="s"></div>
<!-- 方法4 -->
<div style="clear: both"></div>
</div>
display:
block; 块级元素
inline; 行内元素
inline-block; 行内块元素
table; 表格
none;
当一个元素水平垂直居中在父元素中
<style>
/*
目的: 让一个盒子在父元素中 水平垂直居中
方法1
利用table的特点 默认垂直方向居中
*/
/* 充当 table*/
.p{
width: 500px;
height: 500px;
background: #FF5741;
line-height: 500px;
/*在div中无效的 */
/* vertical-align: middle;*/
display: table; /*设置为table*/
}
.cell{
/* 设置为 td*/
display: table-cell;
/*在td中就使用 垂直居中属性 了*/
vertical-align: middle; /*垂直居中*/
}
.s{
width: 100px;
height: 100px;
background:aqua;
/*水平居中*/
margin: auto;
}
table:hover,.p:hover{
height: 600px;
}
</style>
</head>
<body>
<!--table-->
<div class="p">
<!--td-->
<div class="cell">
<div class="s"></div>
</div>
</div>
<!-- -->
<table width="500px" height="500px" border="1" cellspacing="0" bgcolor="red">
<tr>
<td>
<div class="s"></div>
</td>
</tr>
</table>
显示属性
display:none;
visibility: hidden;
opacity: 0;
<style>
div{
width: 200px;
height: 200px;
background: red;
/*1 不支持过渡效果 */
/* display: block;*/
/*opacity: 1;*/
transition: opacity .3s;
}
div:hover{
/*消失 直接在页面内 灰飞烟灭 不再占据页面空间*/
/* display: none;*/
/* 隐藏起来 会占据空间*/
/* visibility: hidden;*/
/*3 直接修改透明度 */
opacity: 0;
}
</style>
</head>
<body>
<div>
</div>
<h1>测试文本</h1>
定位布局
1、相对定位
特点:
1、相对于自己原有的位置坐参考 发生位置的变化
2、相对定位脱离原有的平面，占据原有的空间
语法: position:relative; 我定位了
left:正值 往右移动;
right:正值 往左移动
top: 正值 往下移动
bottom: 正值就往上移动
可以给负值
用处: 1、 自己位置的微调(参考对象是自己原有位置) 2、 给子元素做位置的参考
<style>
/*
相对定位用处:
1、 自己位置的微调(参考对象是自己原有位置)
2、 给子元素做位置的参考
*/
div.d1{
width: 200px;
height: 200px;
background:aqua;
/*同一个平面 把人挤走*/
/*margin-bottom: 10px;*/
/* 相对定位 保留原有的位置 不再同一个平面 不会影响别人*/
position: relative;
left: 10px;
top: 10px;
}
div.d2{
width: 200px;
height: 200px;
background:#a71d5d;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
绝对定位
目的: 用来解决 不是同一个平面的模块
侧边 下拉 播放 遮罩
特点:
1、脱离原有平面 也不会占据页面空间(浮动一样的)
导致下一行的元素会上移(没有属性解决 )
2、参考对象 上一级实现了定位属性(不限制)的元素的左上角做参考
如果都没有定位属性 则以body左上角作参考
语法:
position:absolute;
left:正值 可以给负值 可以给百分比
right:正值 可以给负值 可以给百分比
top: 正值 可以给负值 可以给百分比
bottom: 正值 可以给负值 可以给百分比
<style>
/*
绝对定位: 不是用来处理同一个平面布局的 不要用绝对定位布局
1、脱离原有平面 **也不会占据页面空间**(浮动一样的)
2、参考对象 上一级实现了定位属性(不限制)的元素的左上角做参考
如果都没有定位属性 则以body左上角作参考
*/
div.d1{
width: 200px;
height: 200px;
background:aqua;
/*绝对定位 此时父级元素没有定位属性 参考对象是body*/
position: absolute;
left: 400px;
top:400px;
}
div.d2{
width: 200px;
height: 200px;
background:#a71d5d;
/* 无法用来解决 绝对定位导致的下一行元素上移*/
/*clear: both;*/
/* */
/* position: absolute;
top: 200px;*/
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
父子级情况下 参考对象处理:
<style>
.p{
width: 500px;
height: 500px;
background:red;
margin: 100px;
/* 父元素做参考 采用相对定位做参考 保留原有的位置 不会影响别人
子绝父相
*/
position: relative;
}
.s{
width: 100px;
height: 100px;
background:blue;
/*子元素绝对定位*/
position: absolute;
left: 0;
top:0;
}
</style>
</head>
<body>
<div class="p">
<div class="s"></div>
</div>
<div class="123">123</div>
套路:
实现水平垂直居中方法2
<style>
.p{
width: 500px;
height: 500px;
background:red;
margin: 100px;
/* 父元素做参考 采用相对定位做参考 保留原有的位置 不会影响别人
子绝父相
*/
position: relative;
}
.s{
width: 100px;
height: 100px;
background:blue;
/*子元素绝对定位*/
position: absolute;
/* 方法2 水平垂直居中显示*/
left: 50%;
top:50%;
/* 默认是左上角为参考 移动当前元素一般的宽高*/
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="p">
<div class="s"></div>
</div>
绝对定位下图片剪切
指令：clip:rect(上，右，左，下)；
<style>
div{
width: 500px;
height: 500px;
border:1px solid #ccc;
position: relative;
}
img{
/*在绝对定位的情况下 */
position: absolute;
left:50%;
top:50%;
margin-left: -90px;
margin-top: -88.5px;
/* 如果图片不是很理想*/
/* 四个值 上 右 下 左*/
/* 13两个值 决定的是显示的图片的高度 24显示的宽度*/
clip: rect(63px,151px,148px,57px); /*图片的剪切*/
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg" alt="" >
</div>
定位对行内元素的影响
<style>
/*
定位对行内元素的影响
*/
a{
width: 200px;
height: 100px;
background: red;
/*1 浮动*/
/* float: left;*/
/* 2 修改display属性*/
/* display: block;*/
/* 相对定位不会修改display值*/
/*position: relative;*/
/* 3 绝对定位 能修改display值为block 能实现行内元素宽高的修改*/
position: absolute;
}
</style>
</head>
<body>
<a href="">百度一下下</a>
父子级多个定位情况
z-index:数字;数值越大级别越高
1默认情况下 子元素绝对定位 兄弟之间后来者居上 后面的元素在最上面
子元素永远会压着父元素
2通过 z-index 的属性 进行位置的调节
值越大 级别越高 越在上面 没有单位的 默认是0
3特点: z-index 支持相对定位属性
<style>
.p{
width: 500px;
height: 500px;
background: red;
/*做参考*/
position: relative;
z-index: 1000;
}
.p>div{
width: 100px;
height: 100px;
/*所有的子元素 都实现绝对定位*/
position: absolute;
}
.s1{
background: blue;
top: 10px;
left:10px;
/*层级属性*/
z-index: 1;
}
.s2{
background: pink;
top: 20px;
left:20px;
}
.s3{
background: green;
top: 30px;
left:30px
}
h1{
/* z-index 支持相对定位属性*/
position: relative;
z-index: 666;
}
</style>
</head>
<body>
<div class="p">
<h1>相对定位</h1>
<div class="s1">1</div>
<div class="s2">2</div>
<div class="s3">3</div>
</div>
固定定位
特点: 永远以body作为参考对象
会脱离原有平面 不占据页面空间
用处: 满屏遮罩 侧边定位
语法:
position:fixed;
left;
right:
top
bottom
<style>
body{
height: 2000px;
}
a{
/*固定定位*/
position: fixed;
right: 50px; /*距离页面右边50px*/
bottom:100px; /*底部100px*/
}
</style>
</head>
<body>
<h1>返回页面顶部</h1>
<a href="#"><img src="img/dbj1.png" alt=""></a>
补充选择器
1、兄弟关系
<style>
/*相邻兄弟*/
.d1+div{
color:red;
}
/*当前元素的所有兄弟*/
.d1~div{
background: green;
}
</style>
</head>
<body>
<div class="d1">老大张飞</div>
<div >老二张无极</div>
<div >老3张三</div>
2、属性选择器
<style>
/*属性选择器*/
[id]{ /*匹配页面中所有具有id属性的元素*/
color:red;
}
/*属性值的选择器*/
[class='xu']{ /*匹配页面中属性具体的值为xu的元素*/
border:1px solid green;
}
/* 匹配页面中class值以xu为开头的所有的元素 注意空格也算内容*/
[class^='xu']{
background: #0CB3F3;
}
/*匹配页面中 class值以 u1 结尾的所有的元素结尾*/
[class$='u1']{
padding: 20px;
}
/*匹配 data-xu 属性中包含a的所有的元素包含*/
[data-xu*='a']{
font-size: 26px;
}
</style>
</head>
<body>
<!-- 可以自定义属性 -->
<div class="xu" id="" data-xu="shuai" abc="666">隔壁老徐1</div>
<div class="xu1" id="" data-xu="s" abc="666">隔壁老徐2</div>
<div class="xu2" id="" data-xu="shuai" abc="666">隔壁老徐3</div>
<div >隔壁老徐0</div>
伪类补充
:hover :focus :active :visited :link
:target(锚点跳转时的页面状态)这个目标伪类多少有点坑，跳转的锚点不能嵌套在超链接的同级，只能是父级否者会跳转到最开始的超链接处，可能是我水平低老师也没多介绍目前只能通过改变结构的方法解决
目标伪类
在激活锚点的时候 匹配对应的锚点
<style>
div{
height: 400px;
}
/* 当锚点实现跳转时 一个页面只有一个状态 */
div:target{
background: red;
}
</style>
</head>
<body>
<!--2 -->
<a href="#d1">大妈专区</a>
<a href="#d2">日韩专区</a>
<a href="#d3">欧美专区</a>
<!--1-->
<div></div>
<div id="d1">大妈专区</div>
<div id="d2">日韩专区</div>
<div id="d3">欧美专区</div>
<div></div>
结构伪类
<style>
/* .p元素的 第一个孩子 只管结构 和元素符合才可以*/
.p div:first-child{
color: red;
font-size: 26px;
}
/* 最后一个孩子*/
.p div:last-child{
color: #0CB3F3;
}
/* 第n个孩子 支持数学表达式*/
.p div:nth-child(2){
color: green;
}
/*实现隔行变色效果*/
.p div:nth-child(2n){
background: #FF5741;
}
.p div:nth-child(2n-1){
background: #0ACD37;
}
/* 倒数第n个*/
.p div:nth-last-child(1){
font-size: 22px;
}
/* .p 下面的第一个div*/
.p div:nth-of-type(1){ /*找指定的元素名称 的顺序找*/
border:2px solid aqua;
}
</style>
</head>
<body>
<div class="p">
<p>张张</p>
<div>张三</div>
<div>张麻子</div>
<div>张伟</div>
<div>张亮</div>
<div>张飞</div>
<div>张学康</div>
</div>
状态伪类
<style>
/* 禁用时的样式*/
input:disabled{
background: #0CB3F3;
}
/* 勾选中的样式 */
input:checked+label{
color: red;
}
</style>
</head>
<body>
<input type="text" disabled placeholder="禁止输入内容">
<input type="checkbox" id="chk"><label for="chk">同意</label>
标签：复习,元素,基础,height,width,background,div,border,css 来源： https://www.cnblogs.com/shuaifeiyu/p/15029699.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。