DAY2 CSS

1.CSS初始化（京东）

*{
margin:0;
padding:0;
}
.clearfix:before,.clearfix:after { 
               content:"";
               display:table; 
                                }
              .clearfix:after {
               clear:both;
                }
em,
i {
  font-style:normal
}
li {
   list-stye:none
}
a {
  text-decoration:none
}
img {
   border:0;
   vertical-align:middle
}
button {
   cursor:pointer
}
body {
/*CSS3 抗锯齿形 让文字显示的更加清晰*/
-webkit-font-smoothing:antialiased;
background-color:#fff;
font:12px/1.5 Miscrosoft YaHei,Heiti SC,tahoma,arial,Hiragino Sana GB, "\5B8B\4F53",color:#666
}

2.清除浮动总结（浮动元素顶端对齐）

什么时候用清除浮动呢？

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	（推荐）结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	（推荐）结构语义化正确	由于IE6-7不支持:after，兼容性问题

额外标签法（隔墙法）：

<div style=”clear:both”></div>

父级overflow:hidden;

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

父级after伪元素：

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   
                .clearfix {*zoom: 1;}   /* IE6、7 专有 */（直接删除）

父级双伪元素：

.clearfix:before,.clearfix:after { 
               content:"";
               display:table; 
                                }
              .clearfix:after {
               clear:both;
                }
               .clearfix {
                  *zoom:1;
                 }（直接删除）

后面两种伪元素清除浮动，大家暂且会使用就好，深入原理，我们后面学完伪元素再讲。

3.CSS外观属性总结

属性	表示	注意点
color	颜色	背景颜色蔓延padding可以margin不行
line-height	行高	高度等于盒子高度里面内容垂直居中
text-align	水平对齐	（块标签常用）可以设定文字水平的对齐方式。还可以让行内元素和行内块居中对齐
vertical-align	垂直对齐	行内块标签常用
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none

4.css特性

特性	解释
层叠性	就近原则
继承性	子元素可以继承父元素的样式
优先级	- 选择器相同，则执行层叠性选择器不同，就会出现优先级的问题

5.复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是> .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器，并集选择器，每个选择器声明必须独占一行。	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法 - a:link /* 未访问的链接 /- a:visited / 已访问的链接 /- a:hover / 鼠标移动到链接上 /- a:active / 选定的链接 */

6.权重计算公式

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

圆角矩形做法圆角矩形做法：border-radius: 50%;（圆角边框）

盒子阴影
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
box-shadow:水平位置垂直位置模糊距离阴影尺寸（影子大小）阴影颜色内/外阴影；
盒子布局稳定性
width > padding > margin

background-image:一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

7.外边距塌陷

	解决方案
上下相邻块元素，上有margin-bottom，下有margin-top，取两者较大值	尽量给只给一个盒子添加margin值。
两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者	为父元素定义上边框/上内边距/添加overflow:hidden

8.CSS高级技巧

显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visibility	隐藏对象，保留位置	使用较少
overflow	只是隐藏超出大小的部分	1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

overflow 溢出(重点)

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

display 设置或检索对象是否及如何显示。

display: none 隐藏对象（隐藏之后，不再保留位置。）

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

9.用户界面样式总结

属性	用途	用途
鼠标样式	更改鼠标样式cursor	样式很多，重点记住 pointer
轮廓线	表单默认outline	outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用
防止拖拽	主要针对文本域resize	防止用户随意拖拽文本域，造成页面布局混乱，我们resize:none

10. 鼠标样式cursor

鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

11.溢出文字隐藏（省略号代替）

单行文本隐藏

  /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

多行文本隐藏

overflow: hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 3;
/*设置火箭所伸缩盒对象的子元素的排列方式/
-webkit-box-orient: vertical;

12. 用CSS做三角形

<!-- 等腰三角形 -->
    <div class="box1">
    </div>
    <!-- 直角三角形 -->
    <div class="box2">
    </div>

.box1 {
        width: 0;
         height: 0;
         /* 为了照顾兼容性 移动端和高版本浏览器不用兼容 */
         line-height: 0;
         font-size: 0;
         border-color: blue green yellow red;
         border-style: solid;
         border-width: 40px 40px 40px 40px;
     }
     /* 综合写法 */
     .box2 {
         width: 0;
         height: 0;
         /* 为了照顾兼容性 移动端和高版本浏览器不用兼容*/
         line-height: 0;
         font-size: 0;
         border-color: transparent blue transparent transparent;
         border-style: solid;
         border-width: 60px 20px 0 0;
     }

posted @ 2021-02-07 23:25 包头市forever 阅读(26) 评论(0) 收藏举报

刷新页面返回顶部

包头市forever