前端 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 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
随机推荐
- 马士兵对话京东T6阿里P7(薪水):月薪5万，他为何要离职？
马士兵大佬你知道吗? 你竟然不知道?你怎么可能不知道!你不知道是不可能的! 记得自己的第一行Java代码,你的Hello World是跟着谁学的吗?我的就是马士兵老师! 马士兵是唯一一个在当时讲课是让 ...
- Mybatis缓存1----系统缓存及简单配置介绍
mybatis缓存 系统缓存:常用的一级缓存和二级缓存 一级缓存 一级缓存是SqlSession级别的缓存,在操作数据库时需要构建SqlSession对象,在对象中有一个数据结构用于存储缓存数据. ...
- 怎么在vue-cli中利用 :class去做一个底层背景或者文字的点击切换
// html <div class="pusherLists" :class="{hidden: isHidden}"> <span @cl ...
- 【目录】ASP.NET Core 2.1 入门教程
ASP.NET Core 2.1 快速学习.入门系列教程,这个入门系列教程为了帮助大家快速上手ASP.NET Core. 本教程包含且不限于: 使用VS Code开发ASP.NET Core应用 AS ...
- RK3288 android切换耳麦通道
通过耳机状态切换耳机mic与板子麦/work/rk3288/firefly-rk3288_android5.1_git_20180126/kernel/sound/soc/codecs/es8323. ...
- 让微信小程序每次请求的时候不改变session_id的方法
让微信小程序每次请求的时候不改变session_id的方法 每次微信小程序请求的时候都会改变session id, 还好他的请求方法内可以设置header头 所以只需要在启动程序后第一次请求服务器获得 ...
- springboot 在配置文件写参数注入到类中
@Configuration//配置文件位置@PropertySource("classpath:city.properties")//前缀@ConfigurationProper ...
- SpringBoot中配置不序列化返回值为null的属性
package com.weiresearch.properties; import com.fasterxml.jackson.annotation.JsonInclude;import com.f ...
- vue2.0使用基础
开发情况下需要引入vue.js和vue-resource.js,el:dom生效范围,data,dom静态数据,mounted:初始化调用方法,注意,官方文档需要添加this.$nextTict(fu ...
- python中的缓存技术
python缓存技术 def console(a,b): print('进入函数') return (a,b) print(console(3,'a')) print(console(2,'b')) ...