css笔记

首先来梳理一下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时父元素跟着下来。

那我们解决此类问题一般有四种解决方案。

1. 增加父级元素的高度

   #father {
             border:1px #000 solid;
             height: 700px;
         }

2. 增加一个空的div标签去清除浮动

   <div class="clear"><div>
   
   .clear{
        clear: both;
        margin: 0;
        padding: 0;
    }

3. overflow   即给父级元素中增加一个 overflow：hidden

给父类添加一个伪类：after

#father:after{
    content: '';
    display: block;
    clear: both;
   }

简单总结一下：

1. 设置父元素的高度 ， 简单但是元素如果有了固定的高度就会被限制
2. 浮动元素后面增加空div，   简单但是代码中尽量避免空div
3. overflow， 简单，下拉的一些场景避免使用
4. 父类中添加一个伪类：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