前端 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 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
随机推荐
- DB2命令行查看执行计划
查看对应SQL的执行计划 分析程序包 db2expln -d 数据库名 -i -g -c 模式名-p程序包 -s 0 -t db2expln -d 数据库名 -i -g -c 模式名-p程序包 ...
- Python - 元组 , range
元组和元组嵌套 元组: 俗称不可变的列表.又被成为只读列表, 元组也是python的基本数据类型之一, 用小括号括起来, 里面可以放任何数据类型的数据, 查询可以. 循环也可以. 切片也可以. 但就是 ...
- Codeforces A Mist of Florescence
A Mist of Florescence 题目大意: 事先告诉你每种颜色分别有几个联通块,构造一个不超过 \(50*50\) 的矩形.用 \(A,B,C,D\) 四种颜色来对矩形进行涂色使它满足要求 ...
- Python第九节 条件和循环
while...else 当满足while循环条件的时候执行循环体内的语句,否则执行else的语句例如下面的例子: count = 1 while count <= 5: print(" ...
- react使用总结
1.拿到页面首先需要设计好,每个组件该怎么实现,划分好组件可以减少重复代码,有的时候需要和后端确认才能形成正确的划分 2.页面上的需要展示的数据都是由后端数据而来,所以任何增删改查的数据都要从后端重新 ...
- 【CSS】水平居中与垂直居中
有宽度的div水平居中 1.左右margin设为auto即可 .center { width: 960px; margin-left: auto; margin-right: auto; } 2.绝对 ...
- 浅谈异步上传插件 jquery-file-upload插件
当我们需要异步上传文件的时候,我们倾向于在网上查找相关的JQuery插件,jquery-file-upload就是我们经常看到的,但是他的主页是英文的,对于我们这些英语比较差的同学来说,简直就是... ...
- org.springframework.context.ApplicationContextException: Unable to start web server; nested exception is org.springframework.context.ApplicationContextException: Unable to start ServletWebServerApplic
org.springframework.context.ApplicationContextException: Unable to start web server; nested exceptio ...
- Cesium导出PDF
首先安装 html2Canvas 和 jspdf npm i html2Canvas - S npm i jspdf - S 然后在vue页面引入 import html2Canvas from 'h ...
- zabbix 发送邮件到企业微信
#!/usr/bin/python2.7#_*_coding:utf-8 _*_#auther:拿来用用import requests,sys,jsonimport urllib3urllib3.di ...