前端 css 进阶
内容目录：
1.css盒子模型
2.浮动 float
3.溢出 overflow
4.定位 position
5. z-index
6.opacity
1.css盒子模型
margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
border:盒子的包装厚度(边框)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
content:物体大小(文本内容)
(1)margin:
margin-left margin-right margin-bottom margin-top
margin:2px 3px 4px 5px; 顺序：上右下左
margin:10px 20px; 第一个参数：上下 第二个参数：左右
margin:10px auto;
(2)padding:
padding-left padding-right padding-bottom padding-top
padding:2px 3px 4px 5px; 顺序：上右下左
padding:10px 20px; 与margin一样
2.浮动：float
float:right; float:left;
只要页面布局，就都会用到浮动
浮动带来的影响：
脱离文档流，造成父标签塌陷
三种解决方式：
(a)固定高度
(b)伪元素清除法
(c)overflow:hidden
使用较多的 ---> 伪类清除法
'''
.clearfix:after {
content:'';
display:block;
clear:both;
}
'''
3.溢出 overflow
overflow:hidden;
文本超出div的长度的时候会将其隐藏
overflow:auto; 加上一个滑条（下方）
overflow:scroll; 加上两个滑条（右边、下方）
4.定位 position
(1) 相对定位：相对于标签本身原来的位置
(2) 绝对定位：相对于已经定位过的父标签
(3) 固定定位：相对于浏览器窗口固定在某一个位置
1.static(静态):
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2.relative(相对定位):
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。需要注意的是即使设置了元素的相对定位以及偏移值，
元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，
left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意： position：relative的一个主要用法：方便绝对定位元素找到参照物。
3.absolute(绝对定位):
设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，
那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。
这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;
父元素设置position:relative; 然后Top、Right、Bottom、Left用百分比宽度表示。
4.fixed(固定):
对象脱离正常文档流，使用top,right,bottom,left等属性以窗口为参考点进行定位，当滑动滚动条时，
对象会固定在原先位置，不会动！其层叠通过z-index属性定义。
注意：一个元素如果设置了position:absolute|fixed;那么该元素不能设置float。但relative可以。
脱离文档流：
绝对定位、固定定位
不脱离文档流：
相对定位
5. z-index
#i2 {
z-index:999;
}
设置对象的层叠顺序：
1.z-index值表示谁压着谁，数值大的压住数值小的
2.只有定位了的元素，才能有z-index，也就是说，不管相对定位、决定定位、固定定位，都可以使用z-index,而浮动元素不能使用
3.z-index值没有单位，就是一个正整数，默认为0
6.opacity
用来定义透明效果。取值范围是0~1， 0是完全透明，1是完全不透明****************实现的例子*******************************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cnblog</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<div class="blog-page">
<!--博客侧边栏开始-->
<div class="blog-left">
<div class="head-image">
<img src="1.jpg" alt="">
</div>
<div class="blog-user-name">
<p>赖小七</p>
</div>
<div class="blog-user-info">
<p>这个人什么都没写！</p>
</div>
<div class="blog-contact">
<ul>
<li>关于我：</li>
<li><a href="">新浪微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog-tech">
<ul >
<li>SING</li>
<li>ROCKET GIRL</li> </ul>
</div>
</div>
<!--博客侧边栏结束--> <!--博客右侧内容开始-->
<div class="blog-right">
<div class="blog-content">
<div class="blog-title">
<span class="title">天王盖地虎，小七一米五</span>
<span class="time">2019-05-30</span>
</div>
<div class="blog-abstract">
<span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
</div>
<hr>
<div class="blog-content-tech">
<span>SING</span>
<span>ROCKET GIRL</span>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<span class="title">天王盖地虎，小七一米五</span>
<span class="time">2019-05-30</span>
</div>
<div class="blog-abstract">
<span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
</div>
<hr>
<div class="blog-content-tech">
<span>SING</span>
<span>ROCKET GIRL</span>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<span class="title">天王盖地虎，小七一米五</span>
<span class="time">2019-05-30</span>
</div>
<div class="blog-abstract">
<span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
</div>
<hr>
<div class="blog-content-tech">
<span>SING</span>
<span>ROCKET GIRL</span>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<span class="title">天王盖地虎，小七一米五</span>
<span class="time">2019-05-30</span>
</div>
<div class="blog-abstract">
<span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
</div>
<hr>
<div class="blog-content-tech">
<span>SING</span>
<span>ROCKET GIRL</span>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<span class="title">天王盖地虎，小七一米五</span>
<span class="time">2019-05-30</span>
</div>
<div class="blog-abstract">
<span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
</div>
<hr>
<div class="blog-content-tech">
<span>SING</span>
<span>ROCKET GIRL</span>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<span class="title">天王盖地虎，小七一米五</span>
<span class="time">2019-05-30</span>
</div>
<div class="blog-abstract">
<span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
</div>
<hr>
<div class="blog-content-tech">
<span>SING</span>
<span>ROCKET GIRL</span>
</div>
</div>
<div class="blog-content">
<div class="blog-title">
<span class="title">天王盖地虎，小七一米五</span>
<span class="time">2019-05-30</span>
</div>
<div class="blog-abstract">
<span> 天王盖地虎，小七一米五 天王盖地虎，小七一米五 天王盖地虎，小七一米五</span>
</div>
<hr>
<div class="blog-content-tech">
<span>SING</span>
<span>ROCKET GIRL</span>
</div>
</div> </div>
<!--博客右侧内容结束--> </div>
</body>
</html>
博客页面
/*博客页面的css样式表*/
/*通用样式*/
body {
margin:;
background-color: lightgray;
}
/*清除超链接的下划线*/
a {
text-decoration: none;
}
/*清除ul列表前面的点和内边距*/
ul {
list-style-type: none;
padding-left:;
}
/* 清除 浮动塌陷问题*/
.clearfix:after {
content: '';
clear: both;
display: block;
} /*左侧边栏的样式*/
.blog-left {
width: 20%;
height: 100%;
position: fixed; /*固定定位*/
background-color: rgba(0, 0, 0, 0.47); } /* 设置头像框*/
.head-image {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
margin: 30px auto;
overflow: hidden;
} /* 设置 头像里面的照片 填充 */
.head-image img {
width: 100%;
}
/*设置 名字 和 介绍信息*/
.blog-user-name,.blog-user-info {
color: lightgray;
text-align: center;
} /* 左下方的联系方式 和 技术 的 ul*/
.blog-contact ul,.blog-tech ul{
text-align: left;
padding-left: 30%;
margin-top: 80px;
color: lightgray;
} /* 超链接 a */
.blog-contact a:link {
color: white;
}
.blog-contact a:hover {
color: red;
}
.blog-contact a:active {
color: yellow;
}
.blog-contact a:visited{
color: #00e5ff;
} /*----------右边内容的样式----------*/
.blog-right {
float: right;
width: 80%;
} /* 一篇文章整体*/
.blog-content {
border-radius: 5px;
margin: 5px 10px;
height: 150px;
background-color: white;
border: 1px solid darkgrey;
box-shadow: 3px 3px rgba(0,0,0,0.3);
} /* 一篇文章中， 标题整体 包括标题内容和时间*/
.blog-title {
border-left: 5px solid red;
} /* 一篇文章中，标题内容 */
.title {
margin-left: 10px;
height: 50%;
font-size: 36px;
} /* 一篇文章中， 最上面的标题后面的 时间*/
.time {
font-size: 16px;
margin-top: 5px;
float: right;
color: darkgrey;
} /* 一篇文章中， 中间的 内容摘要*/
.blog-abstract {
margin-left: 20px;
padding-top: 10px ;
height: 30%;
} /*一篇文章中，最下方的 #Python # js*/
.blog-content-tech {
color: darkgrey; margin-left: 20px;
} .blog-content-tech span{
display: inline-block;
margin-left: 20px; }
博客样式
插入的图片：
效果图：
前端 css 进阶的更多相关文章
- CSS进阶之SASS入门指南
CSS进阶之SASS入门指南 随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...
- webpack快速入门——CSS进阶：自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——CSS进阶，Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
- webpack快速入门——CSS进阶：SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
- webpack快速入门——CSS进阶：消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...
- css进阶 00-准备
前言 css 进阶的主要内容如下. #1.css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性(非布局样式) #2.css 布局相关 css 布局属性和组合解析 常见布局方 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...
- 前端CSS编程之道-LESS
由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
随机推荐
- vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)
1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...
- python基础【第七篇】
字典 列表可以存储大量的数据类型,但是只能按照顺序存储,数据与数据之间关联性不强. 所以咱们需要引入一种容器型的数据类型,解决上面的问题,这就需要dict字典. 字典(dict)是python中唯⼀的 ...
- Neo4J(Cypher语句)初识
欢迎各路大神临幸寒舍 以下节点标签为people,friend,用户自己也可以设置成其他标签,查询时需要用到标签.这个标签可以类比为关系数据库中的表名 创建节点.关系 创建节点(小明):create ...
- How to easily Detect Objects with Deep Learning on Raspberry Pi
https://medium.com/nanonets/how-to-easily-detect-objects-with-deep-learning-on-raspberrypi-225f29635 ...
- Linux设置chrome缓存至内存，及开关机同步
默认chrome缓存位置在~/.cache/google-chrome中,磁盘io很多.为减少磁盘io,保护磁盘同时加快chrome速度,可设置缓存使用内存盘,缺点是重启后缓存丢失,所以这里可以使用脚 ...
- 路由网关--spring cloud zuul
路由网关--spring boot Zuul 1.为什么需要Zuul? Zuul Ribbon 以及 Eureka 相结合,可以实现智能路由和负载均衡的功能, Zuul 能够将请求流量按某种策略分发到 ...
- php 学习一 变量的定义
//php有如下几种数据类型 // false true boolean类型 //integer int 整数 //float 浮点数就是小数 //string 字符串 //string null 空 ...
- Redis中存储对象区别
1.最常用的是String结构,key和value都是字符串类型: 2.哈希:比较是用于对对象的操作: 3.List:按照插入数据顺序保存,value是可以重复的,底层是双向链表: 4.集合:是Str ...
- Vue学习笔记【22】——Vue中的动画（列表的排序过渡）
<transition-group> 组件还有一个特殊之处.不仅可以进入和离开动画,还可以改变定位.要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用. ...
- CSS3布局篇（多列布局）
我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...