CSS_note

ticsta738715
165 阅读4分钟

字体

.font{
font-family:Arial,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Helvetica,
"PingFang SC",
"Hiragino Sans GB",
"Microsoft YaHei",
SimSun,
sans-serif;}
  • font-size是设置高（默认16px）。宽度是自适应
  • line-height 行高 控制单行文本所占高度上面2个配合使用，可以控制‘行间距’，行高=文字高度，则行间距=0
  • 居中水平： line-height= height 文本就垂直居中了
  • font-weight 默认normal 还可以 lighter bold bolder 也可以 写数字 ，如100，200。 manx=900.
  • bold 效果和<strong>标签效果一样
  • text indent:首行缩进，可以写PX，也可以em ，1 em= 1fontsize 的值

选择器

优先级

!important > 行间样式 > id > class=属性选择器=伪类 > tag=伪元素 > *

权重

无限 > 1000 > 100> 10 > 1 > 0 (256进制）

  • 父子选择器 （派生选择器） 子：包括但不限于 儿子孙子

  • 直接子元素选择器：div > span {XXX} 只能选择‘儿子’，不能选择‘孙子’

margin

塌陷，垂直方向的margin ，嵌套的父子结构是粘合在一起的，二者取最大值显示

<div class="warpper">
<div class="box "></div>
</div>

* { margin: 0;
   padding: 0;}

.warpper {
background-color: blue;
margin-top: 100px;
height: 100px;
width: 100px;}

.box {
background-color: red;    margin-top: 150px;
height: 50px;
width: 50px;
/* margin-top
box 的> warpper的
就带着 warpper 这个DIV 一起往下动 
*/}

解决方法：触发bfc
(block format context) 块级格式化上下文

{ 酌情选择
1 加上 overflow:hidden 溢出隐藏
2 position:absolute；
3 float：left right；
4 display：inlin-block；}

ps：这俩
{ position:absolute； float：left right；} 
会打内部把元素变成inline-block

合并：（兄弟级别的元素） 左右margin叠加，上下会取最大值

  <div class="demo1"></div>
  <div class="demo2"></div>
  
  .demo1{
  background-color:red;
  margin-bottom: 100px;}
  
  .demo2{
  background-color:green;
  margin-top: 100px;}
  
  这里的margin不会叠加到200
  只是取100，如果有一个变成150
  则取最大值150

真实开发中选择，不解决。因为如果想需要叠加200，那就直接一个写0，一个写200就行，用数学计算的方式来补齐

给img设置宽高时候，最好只设置1个值，另一个就自适应了。 div{vertical-align: middle;} 控制右边 {行级（块）标签 文本} 的对齐方式(也可以写像素)

div套div

若想让 内div居中，且横向拉动浏览器，标签不消失（外div缩小） 可以 先设一个想要的宽度， 然后 margin:0 auto

层模型

position：
absolute relative 
绝对     相对
fixed static；
固定   默认的（标准文档流定位）

  • absolute 脱离原来位置向上提一个层， 找离他最近的,有定位的（absolute，relative，啥啥的都行）父级定位

  • 如果没有参照浏览器边框进行定位 若2个标签都 absolute了 后 absolute的标签 抽离的层面更高

  • relative:1 也是抽离出来 向上提一个层，但是原来位置依然保留

  • 2 以原来位置为坐标原点，进行定位 类似灵魂出窍，原来的位置 还占着，但是可以根据原来位置四处飘

一般工作中，用absolute进行定位，用relative作为参照物

 div{
 width:50px; 
 height:50px; 
 background-color:red; 
 如果想文档水平垂直居中
 （拉伸浏览器窗口也不变）
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-50px;
 margin-left:-50px;
 
 如果想，相对可视窗口居中
 就把上面的absolute -> fixed            
 其他照抄}

浮动流

  • 1.浮动产生了浮动流，块级元素看不到产生了浮动流的元素（会钻到底下 Z轴）

  • 产生了bfc的元素+文本类属的元素+文本， 能看到浮动元素

  • 文本类元素：带有inline属性的元素。（因为带有文本类特点，例如 文本分隔符）

解决方案

  • 把钻到底下的，转换成bfc(见上)
  • 伪元素（伪元素，初始都是inline ,必须要有content，哪怕是 =‘’）
.wrapper::after{
    content:'';
    display:block;
    clear:both;}

清除浮动流三件套：content空+display块+clear both

  • 只有html的时候，没有js 和css（网速慢），也能让网站工作

<a class="without" href="https://www.taobao.com" target="_blank"> 淘宝</a>

.without{
background-image: url(https:  img.alicdn.com tfs TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
display: inline-block;
width: 190px;
height: 90px;
background-size: 190px 90px;
缩进整个容器宽度
文字就出去了（但是会折行）
text-indent: 190px;
三件套其中2个
white-space: nowrap;
overflow: hidden;  

方法二：
容器高度设置为0
然后高度用padding来提供    
（因为文字进不了padding
背景图片却可以）
background-image: url(https:  img.alicdn.com tfs TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);     
display: inline-block;     
width: 190px;     
height: 0px;     
padding: 90px;     
background-size: 190px 90px;     
overflow: hidden;}
avatar
文章
阅读
粉丝