【笔记】css修饰2
CSS背景属性综合案例
当页面滚动的时候，当前的背景图片并没有随之一起滚动上去，而是在原来的位置慢慢消失，被后面的图片慢慢替换掉，这种效果被称之为视觉差。
如何实现?
视觉差效果中有多少张图片切换，就需要多少个容器，背景图片没有平铺，而是占满了容器的所有位置。
使用background-attachment：fixed；样式实现了背景的固定
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo1.css" /></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body
</html>* {padding: 0;margin: 0;
}html,body {height: 100%;
}div {height:100%;
}.box1 {background: red;
/* background-image:url(img/魈宝.png);background-repeat: no-repeat;background-size:cover;background-attachment: fixed;
*/background: url(img/魈宝.png) no-repeat 0px 0px/cover fixed;
}.box2 {background: green;
/* background-image:url(img/3.jpg);background-repeat: no-repeat;background-size:cover;background-attachment: fixed;
*/background: url(img/3.jpg) no-repeat 0px 0px/cover fixed;
}.box3 {background: yellow;
/* background-image:url(img/7.jpg);background-repeat: no-repeat;background-size:cover;background-attachment: fixed;
*/background: url(img/7.jpg) no-repeat 0px 0px/cover fixed;
}
CSS轮廓
|
属性 |
值 |
|
|
轮廓样式 |
outline-style |
dotted 定义一个点状轮廓 dashed 定义一个虚线轮廓 solid 定义一个实线轮廓 double 表示双线轮廓 none 表示无轮廓 hidden 定义一个隐藏的轮廓 |
|
轮廓颜色 |
outline-color |
颜色名称 十六进制颜色值 RGB颜色值 |
|
轮廓宽度 |
outline-width |
thin 一般为1px medium 一般为3px thick 一般为5px 一个特定的尺寸：以px em为单位 |
|
轮廓偏移 |
outline-offset |
设置元素和轮廓之间的空隙，是透明的 |
|
轮廓简写 |
outline |
width style color style必须设置 |
CSS边距
|
属性 |
值 |
|
|
margin-top |
||
|
margin-left |
||
|
margin-bottom |
||
|
margin-right |
||
|
margin |
auto 浏览器自动计算的边距 length 以px、pt、cm等为单位指定边距 % 以父元素宽度的百分比来指定边距 如果四个值 那么取顺时针 上右下左 如果两个值 上下边距 左右边距 |
边距塌陷 上下边距会重叠 最终选择 边距较大的那一个，但不会出现在左右边距上
嵌套塌陷 两个嵌套关系的块元素 有时父元素的上边距会与子元素的上边距发生合并，取较大的值
CSS填充和宽高
CSS的填充属性用于在一个元素的内容周围产生空间，也就是边框内到内容外，之间的距离
设置元素的上边右边下边和左边的内填充
|
属性 |
值 |
|
|
padding-top |
length：以px、pt、cm等为单位指定填充 %：以父元素宽度的百分比来指定填充 |
|
|
padding-right |
length：以px、pt、cm等为单位指定填充 %：以父元素宽度的百分比来指定填充 |
|
|
padding-bottom |
length：以px、pt、cm等为单位指定填充 %：以父元素宽度的百分比来指定填充 |
|
|
padding-left |
length：以px、pt、cm等为单位指定填充 %：以父元素宽度的百分比来指定填充 |
|
|
padding |
可以在一个padding属性中指定所有的填充属性 取四个值：上右下左 顺时针 取三个值：顶部 左右部 底部 |
如果一个元素有指定的宽度，那么加载该元素的填充，就会加到该元素的总宽度上
CSS宽高
CSS的宽度和高度属性不包括margin、border和padding区域，只是用来定义元素的内容尺寸。
可以设置的值有 auto、length、%、initial（将高度和宽度设置为默认值，实际上就是auto了）
CSS盒模型
在网站布局中，我们会使用各种各样的元素，这些元素本质上就是一个个小的容器，也称之为盒子。盒子里面可以防止文本、图片、或者其他元素。
什么是CSS盒模型？
本质上是一个包裹每个HTMl元素的盒子。
两个公式
如何在所有浏览器中正确设置一个元素的宽度和高度呢？
盒子的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距
盒子的高度=内容高度+上填充+下填充+上边框+下边框+上边距+下边距
当应用css设置一个元素的width和height属性时，只是设置了元素内容区域的宽度和高度，要计算一个内容的完整尺寸，必须加上，填充、边框和边距。将上面这种计算元素大小的盒模型称作标准盒模型。
怪异盒模型
设置box-sizing属性设置为border-box；这个元素就按照怪异盒模型来呈现大小了
设置box-sizing属性设置为content-box；触发元素的标准盒模型，也是默认值
计算公式：
盒子宽度=CSS样式设置的width值+左边距+右边距
盒子高度=CSS样式设置的height值+左边距+右边距
盒子模型案例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo1.css" /></head><body><div class="container"><div class="title"><p class="left">精品视频</p><p class="right">更多></p></div><div class="info"><div class="left"><img src="img/回锅肉框.png" class="pic1"/><div><p class="p1">哈哈哈</p><p class="p2">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或</p></div></div><div class="center"><img src="img/红烧肉框.png" class="pic1"/><div><p class="p1">哈哈哈哈哈哈</p><p class="p2">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或</p></div></div><div class="right"><img src="img/锅包肉框.png" class="pic1"/><div><p class="p1">哈哈哈哈哈哈哈哈哈哈</p><p class="p2">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或</p></div></div></div></div></body* {margin:0;padding: 0;
}body {background-color: #f2f1ef;
}.container {width: 740px;height: 315px;/*background-color: red;*/margin:0 auto;
}.title {height: 60px;/*background-color: orange;*/line-height: 60px;
}.info {height:255px;/*background-color: yellow;*/
}.titlt>.left {float:left;font-size:18px;
}.title>.right {float: right;font-size:10px;
}.info>div {width:226px;height:255px;background-color: deepskyblue;float: left;
}.info>.center {margin:0px 30px;
}img {vertical-align: middle;
}.pic1 {border-bottom: 4px solid #1fc0ef;
}.pic2 {border-bottom: 4px solid #f6a544;
}.pic3 {border-bottom:4px solid #8cbe00;
}.info>div>div {height:110px;background-color: white;padding:14px 10px;font-size:14px;line-height: 20px;box-sizing:border-box;
}.info .p2 {color:gray;
}CSS布局之显示属性
单击一个地方，面板就显示出来了。由隐藏到 显示。通过javascript控制css display属性的值来实现的。
display是控制布局最重要的css属性，它指定了一个元素是否显示以及如何显示。
每个HTMl都有一个默认的显示值，元素类型不同，默认的显示值也不同，大多数元素的默认显示值是block。
默认的显示值为block：元素显示为块级元素，或者是inline：元素显示为行内元素
元素类型有两类：块元素和行内元素
|
块元素 |
容器标签：div 标题标签：h1 h2 h3 h4 h5 h6 段落标签：p 列表标签：ul ol 里 dl dt dd 表格：table tr th td thead tbody tfoot 水平分割线：hr 预格式化：pre 图像映射：map 表单：form |
|
display默认值 |
block |
|
行内元素 |
图片标签：img 超链接：a 文本修饰元素：sub sup del b strong i em 拆行标签：br 容器元素：span 输入框：input 表格标签：label 矢量图：SVG 内联框架：iframe |
|
display默认值 |
inline |
块级元素总是从一个新行开始，并占用可用的全部宽度，尽可能的向左和向右伸展
内联元素不从新的一行开始只占用必要的宽度
block显示为块级元素，inline显示为行内元素
none来隐藏元素，原本占据的空间就消失了
样式visibility：hidden 也会隐藏一个元素，该元素仍将占用它隐藏前相同的空间，元素虽然看不见了但仍然影响页面布局。也可以通过visibility：visibile样式来重新显示盒子。
CSS布局之元素类型
行内元素不能设置宽高样式
行内元素可以设置边框线样式
行内元素可以设置内填充样式
行内元素可以设置左右方向的外边距样式
给块元素设置宽高、边框线、内填充、外边距样式，都是有效的
每个块元素会独占一行，能否像行内样式一样在一行排列呢？
display：inline-block
具备inline和block两种显示类型的特点，比如既可以给元素设置宽高，又可以在一行上显示
设置一个元素的display属性只能改变该元素的显示方式，而不能真正的改变html元素的类型。
在搭建网页结构时，虽然有很多html元素可以使用，但还是要遵循一些嵌套规则的。
CSS嵌套规则
规则一：块元素可以包含行内元素或某些块元素，但行内元素却不能包含块元素，它只能包含其他的行内元素。
规则二：块元素不能放在p元素里面。
规则三：有几个特殊的块级元素只能包含行内元素，不能再包含块元素，这几个特殊的元素时：h1、h2、h3、h4、h5、h6、p、dt
规则四：块级元素一般与块级元素并列、行内元素一般与行内元素并列。
CSS布局之溢出处理
内容太大，无法容纳在指定区域时，是否要裁剪内容或添加滚动条。
|
属性 |
值 |
|
overflow |
visible：默认，溢出的内容没有被剪掉。内容会在元素的框外呈现。 hidden：溢出的内容被剪切，其余的内容会不可见。 scroll：溢出的内容被剪掉，并且增加了滚动条来查看其余的内容。 auto：类似于scroll，只有在必要时才添加滚动条。 |
|
overflow-x overflow-y |
是否在水平方向或垂直方向上滚动。 |
|
text-overflow |
控制文本溢出的样式 ellipsis（溢出的样式为三个省略号） |
CSS布局之浮动基础
容器浮动以后会脱离标准文档流，相当于飘起来了
浮动只能让容器在当前所在行左侧或右侧排列
实现多个容器横向排列，只需要给所有的容器添加浮动样式即可
|
属性 |
值 |
|
float |
left：左侧浮动 right：右侧浮动 none：不浮动 |
CSS布局之浮动清理
为了使父元素的高度保持正常，给父元素增加一个样式 overflow：auto；
这个元素的意思是：对于超出边界的元素，父元素可以做自动的调整。父元素的高度就变得正常了
使用clear样式属性，clear这个样式叫做清除浮动
当我们不希望当前元素受到前面浮动元素影响的时候，就给当前元素增加clear这个样式，换一种说法就是，谁不希望受到影响谁就增加clear这个样式
clear属性常见的值有三个，left right both
|
属性 |
值 |
|
clear |
clear：表示当前元素不受到左浮动的影响 right：表示当前元素不受到右浮动的影响 both：表示当前元素即不受到左浮动也不受到右浮动的影响 |
CSS布局之浮动综合案例
为什么布局采用ul li无序列表，使用两个div元素不也一样吗？两个sapn元素是不是也可以呢？
一般情况下，布局元素选择尽量使用不同的标签，这样做的好处是通过元素选择器就可以分别给他们添加样式了，如果都使用div元素，就需要分别添加一个类属性才能区别开，另外，导航元素都有自己的宽高，需要使用块元素，span就不行了。
为什么要多添加一个a元素？把导航内容直接放到li里不好吗？
顶部导航其实是一个网站的链接。点击它会打开其他的页面，所以这里需要一个a元素
链接使用锚点的写法是为什么呢？不是打开新页面吗？
其实这是一个习惯，也是一个技巧。在我们不知道具体链接之前，可以使用锚点链接的写法，也可以直接写一个#，但切记不要空着！不然浏览器就不会为链接添加默认样式了
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo1.css" /></head><body><!--顶部导航--><ul class="topmenu"><li><a href="#home" class="active">首页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li><li><a href="#aboat">关于我们</a></li></ul><!--页面主体--><div class="clearfix"><!--左侧导航--><div class="column sidemenu"><ul><li><a href="#flight">战争</a></li><li><a href="#city" sclass="active">城市</a></li><li><a href="#island">岛屿</a></li><li><a href="#food">美食</a></li><li><a href="#people">人文</a></li><li><a href="#history">历史</a></li><li><a href="#oceans">海洋</a></li></ul></div><!--页面区域--><div class="column content"><div class="header"><h1>城市</h1></div><h1>查尼亚</h1><p>查尼亚是克里特导上查尼亚地区的首府。</p><p>这个城市可以分为两个部分，老城区和现代城区</p></div></div> <!--底部--><div class="footer"><p>页面底部</p></div></body</html>* {box-sizing: border-box;/*所有元素的width和height样式属性声明就* 可以直接设置元素的实际宽高了*/
}body {margin:0;/*去掉浏览器默认的页面外边距*/
}.topmenu {list-style-type: none;/*去掉列表项的符号*/margin:0;padding: 0;/*去掉容器默认的内填充和外边距*/background-color:#777;overflow: auto;
}.topmenu li {float:left;
}.topmenu li a {display: inline-block;/*把a元素设置为行内块元素*/color: white;text-align: center;padding: 16px;text-decoration: none;/*白色，居中对齐，四个方向添加了16像素的内填充*/
}.topmenu li a.active {background-color: #4caf50;
}/*主体页面*/
.column {float: left;padding: 15px;
}/*左侧导航*/
.sidemenu {width:25%;
}.sidemenu ul {list-style-type: none;margin:0;padding:0;
}.sidemenu li a {margin-bottom: 4px;display: block;padding: 8px;background-color: #eee;text-decoration: none;color: #666;}.sidemenu li a:hover {background-color: #555;color:white;
}.sidemenu li a.active {background-color: #008cBa;color: white;
}
/*内容区域*/
.content {width:75%;
}.header {background-color: #2196f3;color:white;text-align: center;padding: 15px;}/*底部*/
.footer {background-color: #444;color:white;padding:15px;/*clear: both;*/
}/*清理浮动,after在容器底部添加元素*/
.clearfix::after {content:"";clear:both;display:block;/*将伪元素转换为块元素，就可以正常的清理浮动*/
}
CSS布局之定位
例如：地图的标记点，电商网站的各种标识和按钮，浮动快捷入口，吸附导航等等效果。
|
属性 |
值 |
|
|
指定了一个元素定位方式 |
position |
static：静态定位 relative：相对定位 fixed：固定定位 absolute：绝对定位 sticky：粘性定位 |
相对定位
特点：
1. position：relative 相对样式需要配合left、top、right、bottom这些定位属性才能生效。
2. relative相对的是容器自身的屏幕坐标0,0点
3.容器位置发生位移后，原来占据的空间依然保留
4.默认会覆盖没有定位的容器
绝对定位
特点：
绝对定位的元素会脱离文档流
绝对定位的参照点为，有定位设置的离他最近的祖先元素的0,0点坐标
绝对定位的容器默认会覆盖没有定位的容器
固定定位
特点：
固定定位的元素是相对于浏览器视口定位的，这意味着即使页面发生滚动，它也始终保持在同一个位置
top、right、bottom和left属性被用来定位元素，但不是必须的
粘性定位
会产生动态效果，很像static和fixed的结合
一般情况下，粘性定位没有效果，会有以下几个原因：
父元素不能添加overflow：hidden或者overflow：auto属性
元素自身必须声明top、bottom、left、right一个或多个属性，否则就相当于静态定位了
父元素的高度不能低于sticky定位元素的高度
sticky定位元素仅在其父元素内生效
top：0 指当容器为固定定位状态时，相对于父容器的顶部的距离，并不是容器的初始定位
特点：
粘性定位初始状态相当于static定位
相对于父容器的定位条件符合时，容器变现为固定定位
top、right、bottom或left至少声明一个，粘性定位才能生效
CSS定位的堆叠顺序
CSS为盒模型的布局提供了三种不同的定位方案：正常文档流、浮动、定位。
定位中的绝对定位会把元素从正常文档流中完全移走。
CSS同时也允许我们使用z-index属性把它放置在三维空间中。为了决定元素在z轴方向上的位置，CSS允许我们为z-index属性设置一个整数值。值越大元素就离我们越近。z-index值越大的元素将可能覆盖z-index值较小的元素
地图定位案例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo2.css" /></head><body><div class="container"><img src="img/锅包肉框.png" alt=""><div class="marker1"><svg><g><path d="M 0,0 L -15,-15 H -70 Q -75,-15 -75,-20 V -60 Q -75,-65 -70,-65 H 70 Q 75,-65 75,-60 V -20 Q 75,-15 H 15 z"></path><!--用来绘制提示框路径--><text>玉谈公园</text><!--提示文本--></g></svg></div></div></body>
</html>
* {box-sizing: border-box;
}html,body {width: 100%;height: 100%;
}body {margin:0;
}.container {width: 100%;height: 100%;background-color: aliceblue;overflow: auto;position: relative;
}.marker1 {width: 46px;height: 64px;background: url(img/3.jpg) -18px -272px;position: absolute;left:998px;top:1320px;
}.marker1:hover {background-position: -18px -69px;
}svg {position: absolute;left:-18px;top:104px;
}svg g {transform: translate(100px,100px);
}
/*能让g的位置向下和向右偏移就行了*/svg g path {stroke: #fff;fill:#fff;filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.6));
}
svg g text {transform: translate(-13%,-35px);
}
.marker1 svg{display:none;
}.marker1:hover svg {display: block;
}
电商常见定位案例
购物车+轮播图
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo2.css" /></head><body><div class="container"><div class="cart"><img src="img/3.jpg" alt=""> 我的购物车<span>0</span></div><div class="swiper"><div class="left-button"><img src="img/1.png" alt="" /></div><div class="right-button"><img src="img/2.png" alt="" /></div><div class="slider"><ul><li><img src="img/5.jpg" alt=""></li><li><img src="img/7.jpg" alt=""></li><li><img src="img/7.jpg" alt=""></li><li><img src="img/7.jpg" alt=""></li><li><img src="img/7.jpg" alt=""></li></ul></div></div></div></body>
</html>.cart {width: 130px;height: 34px;background-color: #fff;border:solid #eee;padding-left: 10px;text-align: left;line-height: 34px;color:#e1251b;font-size:12px;position: relative;
}.cart img {width:32px;height: 32px;vertical-align: middle;margin-right: 10px;top: -3px;position: relative;
}.cart span {display: inline-block;padding: 1px 3px;background-color:#E1251B ;font-size:12px;line-height: 12px;color: #fff;text-align: center;position: absolute;top:1px;left: 29px;border-radius: 7px;
}.swiper {height:400px;background: aliceblue;margin-top:50px;position: relative;
}.swiper .left-button,
.swiper .right-button {width: 50px;height: 100%;text-align: center;position: relative;
}.swiper .right-button {position:absolute;right:0;top: 0;
}.swiper .left-button img,
.swiper .right-button img {width: 40px;position: absolute;top:50%;left: 5px;margin-top: -20px;
}.swiper .slider ul,
.swiper .slider li {padding: 0;margin: 0;height: 30px;list-style: none;
}.swiper .slider ul {position: absolute;height: 50px;bottom: 0;left: 50%;margin-left: -75px;
}.swiper .slider li {float: left;width: 30px;}.swiper .slider li img {width: 30px;height: 30px;
}
固定和粘性定位案例
下拉菜单案例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo3.css" /></head><body><div class="dropdown-1"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#"> 链接 1</a><a href="#"> 链接 2</a><a href="#"> 链接 3</a></div></div><div class="other">页面其他内容</div><div class="dropdown-2"><img src="img/回锅肉框.png" alt="" width="120px"/><div class=dropdown-content><img src="img/回锅肉框.png" alt="" width="600px"/><div class="desc">中国万里长城</div></div></div></body>
</html>
* {box-sizing: border-box;
}html,body {height: 100%;
}body {margin: 0;padding-top: 20px;
}.dropdown-1 .dropbtn {background-color: #4CAF50;color: white;padding:16px;font-size: 16px;border: none;cursor: pointer;/*定义当鼠标划入按钮时的鼠标形状*/
}.dropdown-1 {display: inline-block;margin-left: 100px;position: relative;
}.dropdown-1 .dropdown-content {display: none;background-color: #f9f9f9;width:160px;position: absolute;z-index: 1;
}.dropdown-1 .dropdown-content a {display: block;color: black;padding: 12px 16px;text-decoration: none;
}.dropdown-1:hover .dropdown-content {display: block;
}.dropdown-1 .dropdown-content a:hover {background: #f1f1f1;
}.dropdown-1:hover .dropbtn {background-color: #3e8413;
}.other {width: 500px;height: 300px;padding: 20px;background-color: aliceblue;
}.dropdown-2 {position: relative;margin-left: 100px;margin-top: 20px;
}.dropdown-2 .dropdown-content {display: none;position: absolute;background-color: #F9F9F9;z-index:1;
}.dropdown-2 .desc {padding:15px;text-align: center;
}.dropdown-2:hover .dropdown-content {display: block;
}.dropdown-2 img {vertical-align: middle;
}
CSS布局之宽高自适应
将width和height的值设置为%，可实现元素的宽高自适应
可以通过：
max-width：最大宽度
max-height:最大高度
min-width:最小宽度
min-height：最大高度
来设置元素宽高自适应的临界值
CSS数学函数calc
CSS的数学函数允许将数学表达式作为属性值使用
calc函数实现两列和三列布局
实现两列布局的基本思路是：左右两侧设置样式display:inline-block;让他们左右排列
CSS圣杯布局
顾名思义，中间容器高旁边两侧的容器低
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo3.css" /></head><body><div class="container"><div class="main"><div class="center">中</div><div class="left">左</div><div class="right">右</div></div></div></body>
</html>
* {box-sizing: border-box;margin:0;padding: 0;
}html,body {height: 100%;
}.container {width: 100%;height: 500px;min-width: 700px;}.left {height: 200px;background-color: cyan;float: left;width:200px;margin-left: -100%;position: relative;right: 200px;}.center {height: 800px;background-color: gold;float:left;width: 100%;
}.right {height: 200px;background-color: greenyellow;float: left;width: 300px;margin-right: -300px;
}.main {padding:0 300px 0 200px;
}
后台管理系统布局
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo3.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/> </head><body><div class="top"><div class="left"><img /></div><div class="right"><ul><li class="one">OA办公系统</li><li class="two">教学系统</li></ul><p>嘻嘻呀<span></span></p></div></div><div class="bot"><div class="left"><ul><li>教学系统管理<i class="material-icons">computer</i></li><li>班级系统管理<i class="material-icons">computer</i></li><li>就业系统管理<i class="material-icons">computer</i></li><li>教学系统管理<i class="material-icons">computer</i></li></ul></div><div class="right"><div class="main_tit"><span>系统管理</span></div><div class="main_info"><table><tr class="tit"> <td>登录账号</td><td>IP</td><td>登录所在地</td><td>上次登录时间</td></tr><tr><td>嘻嘻呀</td><td>123.127.39.5</td><td>127.0.0.1</td><td>2022-06-26 18:29:33</td></tr><tr class="even"><td>嘻嘻呀</td><td>123.127.39.5</td><td>127.0.0.1</td><td>2022-06-26 18:29:33</td></tr><tr><td>嘻嘻呀</td><td>123.127.39.5</td><td>127.0.0.1</td><td>2022-06-26 18:29:33</td></tr><tr class="even"><td>嘻嘻呀</td><td>123.127.39.5</td><td>127.0.0.1</td><td>2022-06-26 18:29:33</td></tr></table></div></div></div></body>
</html>
* {box-sizing: border-box;margin:0;padding: 0;
}html,body {height: 100%;
}ul,ol {list-style: none;
}img {display: block;
}.top {height: 50px;background-color: #428bca;
}.top > .left {width: 190px;height: 50px;/*background-color: orange;*/float: left;
}.top > .right {margin-left: 190px;height: 50px;/*background-color: yellow;*/line-height: 50px;color:white;
}.top > .right > ul {float: left;font-size: 16px;
}.top > .right > ul > li {float: left;padding: 0px 10px;padding-left: 40px;font-size:16px;
}.top > .right > p {float:right;margin-right:20px;
}.top > .right > .one {background:url() no-repeat 4px -89px;
}.top > .right > .two {background: url() no-repeat 4px -134px;
}.top > .right .one:hover {background-color: white;color: #428BCA;background-position: 4px 1px;
}.top > .right .two:hover {background-color: white;color: #428BCA;background-position: 4px -42px;
}.top > .right > p > span {display: inline-block;width: 0px;height: 0px;border: 5px solid transparent;border-top: 5px solid white;position: relative;top:2px;
} .bot {height: calc(100%-50px);background-color: #FFFFFF;
}.bot > .left {width: 190px;height: 100%;background-color: deeppink;border-right: 1px;float: left;
}.bot > .right {margin-left: 191px;height: 100%;/*background-color: deepskyblue;*/
}.bot > .left > ul >li {border-bottom:1px solid #cccccc ;font-size: 14px;color:#232323;line-height: 40px;text-indent: 20px;background-color: #f9f9f9;
}.bot > .left > ul i {font-size: 14px;color:#585858;float: right;margin-top: 12px;margin-right: 20px;
}.bot > .left > ul > li:hover {background-color:white;border-right: 2px solid #428bca;
}.bot > .left > ul > li:hover {color:#428bca;}.bot > .right > .main_tit {border-bottom: 1px solid #e5e5e5;height: 40px;line-height: 40px;font-size: 14px;text-indent: 20px;color: #232323;
}.main_tit > span {color: #428bca;
}.main_info {height: 430px;border: 1px solid #c5d0dc;margin: 10px 30px 0px 30px;
}.main_info > table {width: 95%;height: 380px;border:1px solid #dddddd;border-collapse: collapse;margin: 0 auto;margin-top: 10px;
}.main _info > table td {width: 25%;font-size:14px;color:#707070;padding:5px;border:1px solid #dddddd;}.tit {background-color: #f5f5f5;}.even {background-color:#f9f9f9;
}
BFC
BFC为Block Formatting Context的缩写，中文翻译为块格式上下文，在学习css边距的时候，讲过一个margin塌陷的问题，相邻块元素垂直边距和嵌套块元素垂直边距邻接时，边距会合并，最终边距等于两个margin值最大的那个。
如果一个元素触发了BFC规则，我们也可以称他为BFC区域
一个BFC区域和另一个BFC区域，是相互独立且不会影响的，也就是说如果容器内部的子元素出现了上下边距，边距不会跑到外面去影响其他因素，而是在内部拉开距离，这就使得父元素变成了一个独立的区域。BFC规则还有一个非常重要的特点：如果元素被触发了BFC规则，那么浏览器在计算这个元素高度的时候，会把浮动元素也考虑进去。不管有多少个浮动元素，都不用担心父元素没有高度了
如何触发元素的BFC规则呢
例如：给元素增加浮动，给元素增加相对定位，改变元素的类型为inline-block，改变元素overflow样式，只要这个overflow的值不等于默认值就可以。最常用的就是overflow
无论是浮动、定位或者更改元素类型，都有肯呢个大幅度的影响页面布局，而overflow这个属性则没有这方面的问题
CSS表格
通过样式让表格变得更加美观易用
如何定义表格的边框
border属性
width和height属性用来定义表格的宽度和高度
表格的对齐方式
text-align属性用来设置th或td中内容的水平对齐方式
如居左、居右、居中对齐，默认情况下th元素的内容是居中对齐的，td元素的内容是左对齐的
vertical-align属性是用来设置th或td内容的垂直对齐方式
如顶部对齐、底部对齐或中间对齐，默认情况下对于th和td元素表格中内容的垂直对齐方式是居中对齐
给表格添加 内填充、水平分割线、鼠标滑过高亮及颜色等样式
边框和内容之间的空隙：padding
水平分割线：border-bottom
在tr上使用：hover 鼠标滑过当前行高亮显示
可以给th增加background-color背景色使表头的显示更加醒目了
CSS表单
例子：表单拥有自己的宽度，但是高度是被表单中的不同控件撑开显示的，有边框，圆角显示，同时每一个表单元素之间拥有相等的间距
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="demo4.css"/></head><body><h3>入学信息采集</h3><form><label><span>姓名：</span><input type="text" /></label><label><span>年龄：</span><input type="text" /></label><label><span>手机号：</span><input type="text" /></label><label><span>QQ：</span><input type="text" /></label><label><span>性别：</span><input type="radio" name="gender" />男<input type="radio" name="gender" />女</label><label><span>所选学科：</span><select><option value="">请选择</option><option value="HTML5">HTML5</option><option value="Java">Java</option><option value="Python">Python</option><option value="BigData">BigData</option></select></label><input type="reset" /><input type="button" value="确认提交" /></form></body>
</html>
* {padding:0;margin: 0;
}form {width: 600px;border: 3px solid skyblue;border-radius: 15px;padding: 20px;margin: 50px;
}form > label {display: block;margin-bottom: 20px;
}form >label > span {display: inline-block;width: 90px;text-align: right;
}form > label > input {padding: 5px 10px;
}form > input[type=reset],
form > input[type=button] {width:130px;height: 30px;font-size:18px;cursor: pointer;color:#fff;border:none;
}form > input[type=reset] {background-color: orange;
}form > input[type=button] {background-color: lightgreen;
}
CSS重排与重绘
重排：顾名思义，就是重新排列元素
重绘：重新绘制元素
一个元素的改变而导致整个页面发生变化，可能后续的元素位置都会发生改变，这个时候就会重新排列元素，会触发重排，重新用html树和css树去结合，去生成新的rander树，来进行新一次的绘制，当我们通过后期的操作让页面中的节点发生一些外观上的变化，比如改变背景颜色，文字颜色，边框颜色的时候，不会导致页面排列元素的变化，只是当前一个节点发生变化，对其他节点没有影响，那么这个时候就不需要重新排列元素，只需要重新绘制当前这个节点即可，这个行为叫做重绘
CSS色块搭建
【笔记】css修饰2相关推荐
- 【CSS笔记】CSS修饰表格、表单、CSS重排和重绘
目录 一.CSS修饰表格 1.1.CSS表格属性 (1)边框 (2)宽度和高度 (3)对齐方式 二.CSS修饰表单 2.1.CSS表单 三.CSS重排和重绘 3.1.HTML渲染过程 3.2.重排和重 ...
- JavaWeb笔记:CSS总结
JavaWeb笔记:CSS总结 目录 JavaWeb笔记:CSS总结 一.css的简介 二.css选择器 三.css属性 四.css盒子模型 一.css的简介 1.什么是css ...
- HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性 一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...
- Pink老师前端笔记-CSS第七天
Pink老师前端笔记-CSS第六天 # day09-前端基础CSS第七天 学习目标: 能够使用精灵图 能够使用字体图标 能够写出 CSS 三角 能够写出常见的 CSS 用户界面样式 ...
- css-day01笔记-CSS初识、基础选择器、文字和文本样式
typora-copy-images-to: media 第01阶段.web基础:css-day01笔记-CSS初识.基础选择器.文字和文本样式 一.CSS层叠样式表 学习目标 理解 css的目的作用 ...
- amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
- amazeui学习笔记--css（HTML元素2）--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
- amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
最新文章
- 数据通信技术（三：VLAN划分）
- pta 哈利·波特的考试
- “_snprintf”: 不是“std”的成员
- unity3d 700种 材质球_温度与耐磨钢球的关系
- 在Spring@Component vs @Repository vs @Service
- Java 8 Streams API：对流进行分组和分区
- [WPF自定义控件] 开始一个自定义控件库项目
- Memecached stats
- 计算机组成原理—读写周期与半导体只读存储器
- jspSmartUpload 组件的使用方法
- Java反序列化漏洞之殇
- vue中自己实现的页面切换标签手动关闭功能
- [算法]代码运行时间增长数量级对比 线性级别N vs 线性对数级别 NlgN
- 【渝粤题库】广东开放大学 标准化专业英语 形成性考核
- Linux环境下安装Redis(保姆级教程)
- 高效剪辑，给多个视频同时添加上下图片的操作方法
- Chromebook刷第三方bios
- 微信小程序无法弹出授权登录窗口
- 北师大 外国教育史-6（新教育运动）
- Python 网页爬虫 文本处理 科学计算 机器学习 数据挖掘兵器谱
热门文章
- 高度近视+散光 做TICL晶体植入手术过程
- 论文《Cross-Session Aware Temporal Convolututional Network for Session-based Recommendation》阅读
- 有哪些电容笔值得推荐？十大电容笔知名品牌
- 计算机在医学领域的最新应用领域,计算机技术在医学领域的具体应用及发展研究...
- 上新！欧洲柔性密集仓储机器人
- 偏序集概念+Dilworth定理
- 图扑科技｜智慧船舰，水运的主力军
- root超级用户也不能更改的权限，错误提示：chmod: changing permissions of ‘cron’: Operation not permitted
- 成功商业模式背后的逻辑
- 关于Linux安装Vame tools工具步骤