css 掌握点

半颗黄豆
221 阅读6分钟
  1. 设置宽度
 width: 100px;
  1. 设置高度
 height: 100px;
  1. 设置外边距 上下左右均有100px的外边距（盒子与盒子之间的距离）
margin: 100px;

3.1 设置上外边距

 margin-top: 100px;

3.2 设置下外边距

 margin-bottom: 100px;

3.3 设置左外边距

margin-left: 100px;

3.4 设置右外边距

 margin-right: 100px;

3.5 有宽度的块级元素(占一整行的元素)水平 横向 居中

 margin: 0 auto;
    margin: auto;

如果只写两个值

 margin:

上下外边距 左右外边距 3.6 垂直方向上相邻的两个元素外边距会发生合并现象： 上面盒子设置

margin-bottom: 100px;

下面盒子设置

margin-top: 200px;

则会取较大的值，最终垂直方向上相邻的两个元素之间有200px的距离，不会发生叠加。 3.7 垂直方向上嵌套的两个元素外边距会发生塌陷现象： 外面大盒子包裹里面小盒子， 里面小盒子设置

margin-top: 100px;

则大盒子会和小盒子一起距离顶部100px距离，发生塌陷现象。 解决办法: 给大盒子设置

overflow: hidden;(推荐)

或者 给大盒子设置1px的透明边框 或者 给大盒子设置1px的padding 4. 设置内边距（盒子边框与内容之间的距离）上下左右均有100px的内边距

padding: 100px;

4.1 设置上内边距

padding-top: 100px;

4.2 设置下内边距

padding-bottom: 100px;

4.3 设置左内边距

padding-left: 100px;

4.4 设置右内边距

padding-right: 100px;

上下内边距 左右内边距

   padding:
  1. 取消ul li 列表的小圆点
list-style: none;
  1. 取消下划线
 text-decoration: none;

6.1 添加下划线

text-decoration: underline;
  1. 搜索文档中的内容
ctrl+f
  1. 设置背景颜色
background-color: #000;

8.1

background-color: rgb(0,0,0);

8.2 设置背景颜色透明：

background-color: rgba(0,0,0,.3);

8.3 透明度中a的取值范围是从0(完全透明) - 1(完全不透明) 9. 元素向左浮动

float: left
  1. 元素向右浮动
float: right

10.1 清除浮动：子元素浮动了，脱离标准流不占位置 父元素没有设置高度的情况下 无法被子元素撑开，高度会变成0，所以需要清除浮动带来的影响 隔墙法：给最后一个浮动的元素后添加一个块级元素 同时添加

clear: both;

给浮动的父元素添加

overflow: hidden;

伪元素清除浮动

.clearfix::after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
  1. 设置边框 border: 边框的粗细 线形状 颜色
   border: 1px solid #000

设置上边框

 border-top: 1px solid #000

设置下边框

 border-bottom: 1px solid #000

设置左边框

 border-left: 1px solid #000

设置右边框

  border-right: 1px solid #000

设置透明颜色边框

  border: 1px solid transparent;
  1. 单行文字垂直居中：
line-height: 高度值
  1. 去掉边框
border: 0;

去掉外轮廓线

outline: 0;
  1. 设置文字颜色
color: #000;
  1. 设置行高
line-height: 20px;
  1. 文字水平居中
text-align: center;
  1. 设置css3的盒子模型：
box-sizing: border-box;
  1. 设置版心
.w{width: 1200px; margin: 0 auto;}
  1. 设置文字大小
font-size: 14px;
  1. 设置文字粗细
font-weight: 700; 加粗
  1. 设置文字变细
font-weight: 400; 变细
  1. 设置字体
font-family: '微软雅黑';
  1. 设置斜体文字正常显示
font-style: normal;

设置文字倾斜显示 

font-style: italic;
  1. 设置相对定位
position: relative; 相对于自身移动 占位置
  1. 设置绝对定位
position: absolute; 相对于最近一层有定位的父辈元素 不占位置
  1. 设置固定定位
position: fixed; 相对于浏览器可视窗口移动 不占位置
  1. 设置定位的方位值：
top: 1px; 远离上面1px
 bottom: 1px 远离下面1px
 left: 1px 远离左面1px
 right: 1px 远离右面1px
  1. 溢出隐藏：
overflow: hidden;
  1. 标签/元素隐藏不占位置
display: none;
  1. 让标签/元素隐藏的元素显示出来
display: block;
  1. 标签/元素隐藏占位置
visibility: hidden;
  1. 标签/元素隐藏占位置
visibility: visible;
  1. 文本首行缩进
text-indent: 2em;
  1. 透明颜色
transparent
  1. 设置背景 属性连写 background: 背景颜色 背景路径 是否平铺 水平偏移值 垂直偏移值；
例如 background: pink url('../images/sprites.png') no-repeat -10px -20px;

注意精灵图移动背景位置 都是负值或0 不可能为正值 除此之外水平偏移值和垂直偏移值还可以用方位坐标值来显示 top 靠顶显示背景图片 bottom 靠底显示背景图片 left 靠左显示背景图片 right 靠右显示背景图片 ！！！一定注意给背景图片的盒子一定要有宽高值！！！没有宽高和内容的盒子是无法显示背景图片的！！！ 36.

ul li:nth-child(1){}            选中ul下的第一个li
    ul li:first-child{}             选中ul下的第一个li
    ul li:last-child{}              选中ul下的最后一个li
    ul li:nth-child(2n){}           选中ul下偶数个li 比如第2个 第4个 第6个 li
    ul li:nth-child(even){}         选中ul下偶数个li 比如第2个 第4个 第6个 li
    ul li:nth-child(2n+1){}         选中ul下奇数个li 比如第1个 第3个 第5个 li
    ul li:nth-child(odd){}          选中ul下奇数个li 比如第1个 第3个 第5个 li
    ul li:nth-child(n+3){}          选中ul下从第3个开始到最后的li 包括第三个
    ul li:nth-child(-n+3){}         选中ul下从开始到第三个的li    包括第三个
  1. 行内块元素和行内元素的垂直居中对齐
vertical-align: middle; 同时可以解决img底部3px的问题
  1. 设置边框圆角 ;
  2. 创建一个圆形
border-radius: 10px

border-radius: 50%;
  1. 创建一个胶囊形状 border-radius: 高度的一半
  2. 文字属性连写
font: italic 700 16px/30px "Microsoft Yahei"

            font: 字体斜体 粗细 大小/行高 字体家族
            其中 字体大小和 字体家族是必写属性，顺序不能够调换位置

51. 子绝父相 子元素绝对定位 父元素相对定位 52. 绝对定位、固定定位、浮动不占位置，脱离标准流 脱离标准流的元素默认宽度高度由内容撑开 默认转换为块级元素 margin: 0 auto;无法使其居中 不会发生外边距塌陷的问题 相对定位占位置 浮动永远不会压住文字 53. 权重 ： 继承 * 通配符选择器 0 < 标签选择器、伪元素选择器 1 < 类选择器、伪类选择器、属性选择器、结构伪类选择器 10 < ID选择器 100 < 行内样式 < 1000 < !important 正无穷 54. 浮动 一般li包裹着a都是让li左浮动

 float: left;

右浮动:

 float: right;

浮动的元素不占位置。无法撑开父元素高度，所以要清除浮动：本质是闭合浮动 常见的清除浮动的方式有4种：

  1. 隔墙法：在浮动的元素后面插入一个块级元素，同时设置
clear: both;
  1. 溢出隐藏法：在浮动元素所在的父元素设置
overflow: hidden; 触发BFC 实现清除浮动
  1. 单伪元素清除浮动
 .clearfix:after{
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }

  /*兼容IE的写法*/
    .clearfix{
        *zoom:1;
    }
4. 双伪元素清除浮动

    .clearfix:before,.clearfix:after{
        content:"";
        display:table;
    }
    .clearfix:after{
        clear:both;
    }
    /*兼容IE的写法*/
    .clearfix{
        *zoom:1;
    }

55. 元素的显示与隐藏

 1. display: block; display: none; 元素显示隐藏不占位置

  2. visibility: visible; visibility: hidden; 元素显示隐藏占位置

 3. overflow: hidden; 元素溢出隐藏 可解决清除浮动和外边距塌陷问题 原理是触发了BFC

 4. overflow: auto; 根据内容自动添加滚动条

 5. overflow: scroll; 添加滚动条

  6. opacity: 0; 完全透明占位置 opacity: 1; 完全不透明
  1. 过渡： transition: 过渡的属性 过渡时间(带单位) 速度曲线 过渡延迟时间 transition: width 2s linear 1s; 让宽度 延迟1s后 以linear线性的方式 持续2s的时间过渡 通常写法
  transition: all 2s;
  1. 背景尺寸 背景大小
background-size: 背景宽  背景高;  
	background-size: 100px 200px; 代表设置背景宽度为100px 高度为200px
  1. 设置版心
.w {
	       width: 1200px;
	       margin: 0 auto;
	}
  1. css3 新增盒子模型
box-sizing: border-box;
  1. 文字阴影
 text-shadow: 0 0 0 #000; 分别代表水平偏移 垂直偏移 阴影模糊程度 颜色;
  1. 盒子阴影
 box-shadow: 0 0 0 #000; 同上
  1. 鼠标悬停
.box:hover { }

less一定要掌握的 1.html文件中只能引入css,所以我们需要通过插件将less文件转换为css文件 2.less注释稍稍注意// 单行 /多行/ 3.重点掌握less的嵌套

选择器 :直接子元素 选择器：后代元素 &:伪类，伪元素，交集选择器 4.掌握less中的变量 @变量名称:值;

avatar
文章
阅读
粉丝