首先来梳理一下CSS的结构图,博主也是借鉴的图,但是此图因为久远,忘了出处,如果有侵权行为,请联系博主删除。因为CSS中大部分笔记大同小异,基本的用法就不再过多讲解,博主只讲解一下自己觉得有必要讲解的东西
text-align:文本居中
text-indent:首行缩进
line-height:行高
text-decoration:上划线下划线
a:hover:去掉链接下划线
在CSS3中border-radius属性被用于创建圆角
<style>
div {
width: 100px;
height: 100px;
border: 10px solid green;
border-radius: 0 30px 40px 50px ;
/*对应了四个角,分别是左上,右上,右下,左下.*/
border-radius: 0 30px;
/*此时分别对应的是0-左上右下,30px右上左下.*/
border-radius: 0;
/*分别对应四个角都是0.*/
}
</style>
box-shadow属性被用于添加阴影
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 20px 20px 20px pink;
}
box-shadow: x轴的移动 y轴的移动 阴影的半径 阴影的颜色
父级元素坍塌问题:一个父类包含一个子类,给子类加了margin值,就会出现父级和子级外边距合并,即父级边框坍塌。但是在浮动的盒子中,不会出现父级边框坍塌问题。
margin坍塌:就是在设置子元素margin-top时父元素跟着下来。
那我们解决此类问题一般有四种解决方案。
- 增加父级元素的高度
#father { border:1px #000 solid; height: 700px; }
- 增加一个空的div标签去清除浮动
<div class="clear"><div> .clear{ clear: both; margin: 0; padding: 0; }
- overflow 即给父级元素中增加一个 overflow:hidden
给父类添加一个伪类:after
#father:after{
content: '';
display: block;
clear: both;
}
简单总结一下:
- 设置父元素的高度 , 简单但是元素如果有了固定的高度就会被限制
- 浮动元素后面增加空div, 简单但是代码中尽量避免空div
- overflow, 简单,下拉的一些场景避免使用
- 父类中添加一个伪类:after,写法稍微复杂一点但是没有副作用,推荐使用
定位:
- static定位,HTML元素默认值,即没有定位。
- fixed定位,元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
- relative定位,相对定位元素的定位是相对其正常位置,即使相对定位元素移动到了某个位置,那个位置原来的元素也依然存在。
- absolute定位,因为其定位使元素的位置与文档流无关,因此不占据空间,若其定位元素与其他元素重叠,绝对定位元素会移动到那个位置,会与那个位置原来的元素重叠。
z-index:图层上移:
- 元素可拥有负的 z-index 属性值。
- Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
- z-index数值越大它的层叠等级就越高一些
opacity:透明度:
从0(完全透明)到1(完全不透明)
最后给大家说一下我们常规定的模板类名命名:
名称 说明 快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwords 导航 nav 导航左侧 dropdown 导航右侧 navitems 页面底部 footer 页面底部服务模板 mod_service 页面底部帮助模板 mod_help 页面底部版权模板 mod_copyright