css基础

css网页布局

最大价值：让html做结构，与样式相分离

选择器 {属性：值;属性：值;}

p {
    color: red;
}

css的代码风格

• 样式格式书写:紧凑格式 , 展开格式（提倡，更直观）
• 样式的大小写:用小写的形式做
• 空格规范:属性值前面，冒号后面，空一格;选择器和大括号中间保留一个空格;css选择器的作用：简单来说，就是选择标签用的

css的三种书写

• 内部样式表：html的内部，style标签内，理论上可以放在任何地方，但常用于上方(嵌入式的)，可以控制整个页面

  优点:结构清晰

• 行内样式表：直接砸标签内部写style标签

  <p style="color:red"></p>
  

  用于修改简单的样式

• 外部样式表：样式和结构分离，css在html的外部

  1. 新建一个css的文件，css文件只有样式，没有标签

  2. <link rel="sytlesheet" href="路径"/>
     

link和@import（css2）的区别

<style>
    @import url('...');
</style>

• 写的形式不一样
• link是xhtml标签，@import属于css的范围，只能加载css
• link应用css时，在页面加载的时候同时加载，@import需要页面网页完全载入以后加载
• link支持使用javascript控制DOM去改变样式，而@import不支持

CSS背景

• 背景图片：优点，容易控制位置

  // 背景图片
  backgroud-img:none/url;
  // 背景平铺：重复图片
  background-repeat: none/no-repeat;
  //背景图片位置 注意：方位名词只写一个时，另外一个默认居中显示；无顺序的要求
  background-positon: x y;
  // 背景图像固定 负值的时候是往左和往上移动
  background-attachment: sroll/fixed;
  // 背景颜色
  background-color: red;
  // 背景缩放 可以数字固定也可以时百分比，百分比时候是根据盒子的百分比为基准
  background-size: x y;	
  background-size: contain;	// 等比例的拉伸图片,不超过盒子
  background-size: cover;		// 等比例的拉伸图片,会超过盒子
  

  背景复合写法：background习惯性的写 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

  多倍景：先写的覆盖后写的 图片one会堆叠再two上

  background: url('one') no-repeat left bottom,url('two') norepeat center center
  

• 背景色半透明

  background: rgba(0,0,0,0.3);
  

• 背景渐变

  background: linear-gradient(起始方向,颜色1，颜色2...);
  #起始位置：left right tip bottom ; to left bottom 左下角
  background: -webkit-linear-gradient(left,red,blue);
  background: -webkit-linear-gradient(left/top,red,blue);
  // 颜色节点均匀分布
  background: radio-gradient(red,green,blue);
  // 颜色不均匀的径向渐变
  background: radio-gradient(red %4,gree 10%,blue 4%);
  // 现状为圆形的径向渐变
  background: radio-gradient(circle,red,green,blue);
  

  注意：

  1. 背景渐变必须添加浏览器的私有前缀
  2. 背景图片要设置成功，必须要有高和宽

Emmont语法

快速标签生成

• tab键，直接输入标签名

• 生成多个标签，eg:div3(加tab键)

• 父子级关系>(tab)；兄弟级关系+(tab)

• 生成带有类名或是id名的，直接写.demo(tab) 或者#demo(tab)

  div.demo(tab)或者div#demo(tab)
  

• 若生成的类名有顺序,用$自增符号，从1开始排序

  demo$*5(tab)
  

• 默认显示几个文字，用{}

  div{我不喜欢}(tab) 
  div{$@1996}*2 //从1998到1999
  

选择器

• 基础选择器

  1. 标签选择器
  2. 类选择器：最常用的
  3. ID选择器：有唯一性，同一个id属性只能有一个
  4. 通配符选择器：*{}

• 伪类选择器

  a:link没访问过的链接

  a:visited访问过的链接

  a:hover鼠标经过时的链接

  a:active点击没有松开时

  按顺序申明：link visited hover active

  目标伪类选择器

  :target {	// 匹配页面中所有目标元素 h1
      color: red;
  }	
  
  <a href='#anchor1'>one</a>
  <a href='#anchor2'>two</a>
  <a href='#anchor1'>one</a>
  <h1 id='anchor1'>瞄点一</h1> 
  <h1 id='anchor2'>瞄点二</h1>
  

  E:only-child {	
      // 匹配所有没有任何兄弟元素 并且这个元素是E
      color: red;
  }
  

  E:only-of-type {}	//匹配没有和E同种类型的元素
  // 匹配所有E元素，且这个E元素没有任何同一类型的兄弟元素
  

  E:empty {}	// 匹配所有p标签，且没有任何内容和子节点
  

• 复合选择器

  交集选择器

  两个标签挨在一起，中间不能有空格

  div.test 表示既是div而且div的类名是test

  并集选择器：逗号隔开

常见文本属性

font-style

• itaic：倾斜字体，有一些倾斜字体的文字是没有斜体的，使用浏览器强制执行
• normal：默认正常值
• oblique： 浏览器会显示倾斜的字体样式。

font-weight

字体粗细

• 数字：100-900取值范围
• 单词：normal正常 bold bolder加粗 lighter变细

font-family

字体样式

• '宋体' / '隶属'
• '\5E7C\5706'
• LiSu 如果是英文单个 不需要引号
• Georgia 'Times New Roman' 'Times' serif '隶书' 既有英文又有中文，中文写在后面

font-size

• samller x-samller xx-samller large larger x-large xx-large
• 数字加单位形式 13px

单位

100vw：整屏宽度

100vh：整屏高度

vmax：选vh vm中较大的一个

vmin：选vh vm中较小的一个

• 相对定位

  em:相对于当前对象内文字字体尺寸

  px:相相对于电脑屏幕的分辨率，谷歌默认文字大小是16px

• 绝对定位

  in:英寸

  cm:厘米
  mm:毫米

  pt:点

font

// 空心文字 
<style>
       span {
           font-size: 40px;
           font-weight: 700;
           -webkit-text-fill-color: #f4f4f4;
           -webkit-text-stroke-color: red;
           -webkit-text-stroke-width: 1px;
       }
   </style>
   <span>空心文字</span>

font属性对字体进行综合的设置

font: font-style font-weight font-size/line-height font-family

注意：使用font属性时，必须按照以上顺序书写，不能更换顺序

其中不需要的属性可以省略，但必须保留font-size和font-family

color

字体颜色

• red

• cccccc

  00ffaa 两两相同可以省略 #0fa

• rgb(a,b,c)

  raba 最后a表示透明度：0表示完全透明，1表示完全不透明

• hsl( )

  H 颜色名字：取0到360 0/360红色 120绿色 240蓝色

  S 纯度：值越高越纯 越低越灰 （0-100%）

  L 亮色：黑到白 越低越白 越高越黑 （0-100%）

text-align

文本对在标签之中的对齐方式，，默认左对齐

• center
• left
• right
• justify:文本的两端对齐，一般用于英文锯齿状

text-decoration

文本划线

• none：没有样式
• underline：下划线
• overline：上划线
• line-throught：删除线

<div>
    my what is a Big Dack
</div>
<style>
    div {
        text-decoration: none;
        text-decoration: underline;
        text-decoration: overline;
        text-decoration: line-through;
    }
</style>

text-transform

转换文本的大小写

• capitalize：每一个单词的首字母大小
• lovwercase：所有字母都小写
• uppercase：所有字母都大写
• none：默认都不改变

<div>
    my what is a Big Dack
</div>
<style>
    div {
        text-transform: lowercase;
        text-transform: uppercase;
        text-transform: capitalize;
    }
</style>

text-indent

首行的文本缩进，em一个文字大小

text-indent: 2em;
// -200px

注意：允许负的

text-shadow

文字阴影

text-shadow: 水平方向的阴影位置 垂直的阴影位置 模糊距离 阴影颜色

text-shadow: -10px -10px 3px red,10px 10px 3px pink

注意：可以写多组文字阴影，用逗号隔开

letter-spacing

增加或减少字符间的距离，正值增加，负值减少，用于汉字

若用于字母，则每个字母间的距离都会变大

letter-spacing: 20px;

word-spacing

用于英文的

word-spacing: 20px

line-height

行高，该上下间距，文字行和文字行之间的距离

• number：固定的数字，此数字会与当前字体尺寸相乘来设置行间距

• length：设置固定的行间距

• %：基于当前字体尺寸的百分比行间距

  注意：一般情况下，行距比字号大7 8 像素即可

word-break

• normal:使用浏览器默认的换行规则

• keep-all:文本内容在同一行显示，不换行

  注意：在半角空格和-的时候可以换行，第一次遇见空格会直接换行，接着要看是否超过显示框，如果没有超过就不换行

  一般不用于英文

• break-all：针对英文，所有单词遇到边界一律拆分

white-space

• pre：保留文本原本的样式，超过父元素不换行
• nowrap：文本不换行，文字再一排(一行)显示
• pre-wrap：能解析空格，超出部分自动换行
• pre-line：不解析空格，超过部分自动换行

层叠性 优先级 继承性

层叠性是浏览器处理冲突的能力，如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候的属性就会被另外一个属性层叠掉

优先级

!important>行内样式>id选择器>类/伪类选择器>标签选择器>继承或者*

权重叠加：计算权重,权重会叠加，但不会有进位

• 行内样式 1 0 0 0
• id选择器 0 1 0 0
• 类选择器 0 0 1 0
• 元素选择器和伪元素选择器 0 0 0 1
• 通配符，子选择器，兄弟选择器 * > + ~等 0 0 0 0
• 继承的样式没有权重 !important的权重最高

继承性

文本字体的属性：font-size font-family color text-align

注意

• a标签里面的文字颜色是不能继承父亲的设置的

  <style>
          div {
              color: pink;
          }
      </style>
      <div>
          <a href="#">dsagoji</a>
      </div>
  

继承的是离它最近的祖先元素

	<style>
        #test {
            color: red;
        }
        .father2 {
            color: black;
        }
    </style>

    <div id='test'>
        <div class="father">
            father	// 继承id　的红色
            <div class="son">son</div>	// 继承id的 black
        </div>
        <div class="fater2">
            father2		// 类＞id　black
            <div class="son2">
                son2
            </div>
        </div>
    </div>

盒子模型

盒子模型：marge padding content border

ie盒模型 : 最大的不同在于padding不会撑大盒子

margin

border

border:border-width border-style(solid dashed dotted) border-color

border复合写法：

border:1px solid red	// 边框宽度 边框样式 边框颜色
border-style: solid dotted dashed double; 	// 实线 电线 虚线 双线
border-color: red;
border-width: 2px 3px 1px 	// 上2 右3 下1 左和右一样3

border分别设置

border-right-style: dotted;
border-top-color: red;
border-left-width: 3px;

(没有严格的顺序要求，一般按照这样格式)

  border-collapse: collapse;(表格的细线边框)

注意：边框会影响盒子的实际大小

border-radius边框圆角

border-radius: 4px 8px 12px 16px 	// 左上 右上 右下 坐下
border-radius: 4px 8px; 	// 如果没有某个值就从对角取值
border-top-left-radius: 5px; // 坐上角

​ 复合写法eg:

​ padding: 5px 代表上下左右都是5px

​ padding: 5px 10px 上下5，左右10

​ padding: 5px 10px 15px 上5px 左右10px 下20px

​ padding: 5px 10px 15px 20px 从上开始顺时针

​ marge与padding类似

padding不会撑破盒子

• 如果没盒子本身没有指定高度或者宽度时，不会撑大盒子

浮动的盒子不会有外边距合并的问题

阴影盒子和文字阴影

box-shadow:h-shadow v-shadow blur spread color inser;	// 水平方向(必填) 垂直方向(必填) 模糊距离 阴影大小 内部阴影

h-shadow,v-shadow:设置阴影的位置

spread:向外延展的尺寸距离，设置阴影的大小

注意

1. inser不写时候默认是outside，但不可以写，不然阴影无效
2. 盒子阴影不占空间，不会影响其他盒子的排列

文字阴影：text-shadow:h-shadow v-shadow blur color;

浮动

float: left;
float: right;

CSS浮动特性

标准流：从上往下 从左往右

​ 块级元素一般在父元素从上到下排列

​ 行内元素一般在父元素从左到右排列

• 会脱离标准流的控制（俗称脱标），不在保留原来的位置

• 不管原先是什么元素，加了浮动后具有行内块元素的特点

  如果是块级元素，想要有高度，必须手动添加，它默认的100%添加浮动后会消失

• 所有浮动的盒子在一行显示，并且顶端对其（不管低端），若是装不下，会另起一行显示

  浮动的元素不会撑开父元素

	<style>
 .father1 {
            width: 220px;
            height: 200px;
            box-sizing: border-box;
            border: 2px solid red;
        }
        .father1 div[class^='son'] {
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <div class="angle"></div>
    <div class="father1">Lorem ipsum dolor sit t magni nesciunt eaque amet saepe exercitationem? Voluptatum aute
        m aut sint distinctio itaque corrupti tenetur ad blanditiis?
        <img src="images/睁眼.png" alt="">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>

• 浮动的元素不会遮住文字和图片

  清除浮动

• 同层级

  clear: left;
  // ----------------
  clear: right;
  // ----------------
  clear: both;
  

• 父子级

  1. 给父元素加heitht(不推荐)

  2. BFC布局

     overflow: hidden;
     // -----------------------
     display: inline-block
     

  3. 给父元素的浮动后边加一个空的块级标签，设置清除浮动

     clear: both;
     // ---------------------
     E::after {
         content: '';
         display: block;
         clear: both;
     }
     // -----------------------------
     //IE6,7专用
     *zoom: 1;
     

CSS消除样式

清除内外边距css样式
		 * {
			 marge:0; 
			 padding:0;
		 }
		 注意：行内元素为了兼容性尽量只设置左右的内外边距，设置之后可能也并不会起作用

ul li {
	list-style: none;
}

定位

定位：将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子

定位：定位模式+边偏移

定位模式是用来指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

定位模式

• static:静态定位

• relative:相对定位

  相对定位是元素在移动位置的时候，相对于它原来的位置来说的（自恋型）

  positon: relative
  

  注意

  1. 它是相对与自己原来的位置移动的（移动位置的时候参照点是原来的位置）

  2. 原来在标志流中的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

     相当于块级元素还是可以继承父元素的宽度的

• absolute:绝对定位

  绝对定位是元素在移动位置的时候，相对于它祖先元素来说的

  position absolute;
  

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

  2. 如果祖级元素有定位，则以最近一级的有定位的祖先元素为参照点移动位置

  3. 决定对位不占有原来的位置（脱标）

     不能继承父元素的宽度，需要手动区设置

• fixed:固定定位

  不写偏移量的时候 相对于body定位的（默认状态）

  写偏移量的时候才是相对与浏览器定位

  使用场景：可以在浏览器页面滚动时元素位置不会改变

// 定位设置居中
	<style>
        .father2 {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            background-color: purple;
        }
        .father2 .son {
            position: absolute;
            width: 20px;	 /* 如果高度或则宽度没有写，则会拉伸到父元素的高或宽 auto表示平分剩余空间*/
            height: 20px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: pink;
        }
    </style>
    <div class="father2">
        <div class="son"></div>
    </div>

隐藏

(面试题)

盒子隐藏

• display: none;
  

  隐藏 不会持续占据空间 会隐藏子元素 子元素不能通过设置diaplay: block进行反隐藏

• visibility: hidden/visibale;
  

  隐藏 会持续占据空间 会隐藏子元素 子元素能通过设置visibility: visible进行反隐藏

• opacity: 0/1;
  

  0完全透明 1完全不透明，子元素不能透过子元素 opacity: 0.8进行反隐藏

• position: absolute;
  

  设置偏移量移出视线范围

• 设置宽高 背景透明 不会隐藏子元素 transparent rgba

文本隐藏

• text-indent: 负值;
  

  文字放入盒子 盒子设置隐藏

• font-size: 0
  

overflow

overflow: hidden/scroll;
overflow-x: hidden; <-- y轴上会有滚动条 -->
overflow-y: hidden;

• auto：内容被修建，浏览器会显示滚动条
• inherit：规定应该从父元素继承overflow属性的值

text-overflow

• clip：修剪文本
• ellipsis：显示省略符号来代替被修剪的文本

文字省略...

width: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

注意：要加高度

多行文本显示省略号，有较大的兼容性问题，适用于webkit浏览器或移动端

-webkit-line-clam:限制一个块元素显示的文本行数

diaplay: -webkit-box 必须结合属性，将对象作为弹性盒子

-webkit-box-orient 必须结合属性，设置或检索伸缩盒对象的子元素排列方式

width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;