day40 css

时间 2019-11-30

标签 day40 day css 栏目 CSS 繁體版

原文原文链接

day40 css

内容回顾:

1.浮动

非标准文档流

做用:实现元素并排: 第一个盒子会贴父盒子的边, 第二个盒子会贴第一个盒子的边

特性:只要浮动了, 就脱离标准文档流

只要浮动, 就有一个收缩效果, 就好像是把块搞成行内块的效果(由于你浮动,脱离了标准流,不具有了标准标签的块特征)

字围: 最开始的浮动就是作这个的

只要浮动了, 任意的标签均可以设置宽高

浮动带来的影响:

若是父盒子不设置高度, 子盒子浮动了, 由于子盒子脱离了标准文档流, 浮动不在页面中占位置, 撑不地父盒子的高度.

注意: 要浮动一块儿浮动, 有浮动,清除浮动(4种方式)

一.给父盒子设置固定高度, 后期很差维护

二.内墙法, 给浮动元素的后面加一个空的块级标签, 类名通常为clearfix, 设置该属性为: clear:both;清除左边右边浮动给我带来的影响

三.伪元素清除法

.clearfix:after{

content:'.';

clear:both;

display:block;

visibility:hidden;

height:0;

}

四.父标签加属性: overflow:hidden; 造成BFC

2.display

inline: 在一行显示, 不能设置宽高

block: 独占一行, 能够设宽高

inline-block: 在一行显示, 能够设宽高

none: 隐藏:不占位置

3.visibility: hidden :占位置

今日内容

一.浮动的特性:

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素有字围的效果

4.收缩的效果

margin塌陷问题:

margin:若是不浮动,在标准文档流下, 垂直方向会出现塌陷问题

margin: 若是浮动了, 垂直方向就不会出现塌陷问题

margin的盒子居中问题, 水平居中:

margin 0 auto; 若是不浮动, 在标准文档流下,盒子水平居中

margin 0 auto: 若是浮动了, 就不起做用(如何解决: 把浮动盒子放在新加入的隐藏的父盒子里面)

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
      <style> 
 
          *{ 
 
              padding: 0; 
 
              margin: 0; 
 
          } 
 
          .box1{ 
 
              width: 400px; 
 
              height: 400px; 
 
          } 
 
          /*把浮动盒子放在新加入的隐藏的父盒子里面, 让父盒子居中*/ 
 
          .main{ 
 
              width: 100px; 
 
              overflow: hidden; 
 
              margin: 0 auto; 
 
          } 
 
          .box2{ 
 
              width: 100px; 
 
              height: 100px; 
 
              margin: 0 auto;            #子盒子margin这句就没做用了, 能够删掉 
 
              float: left; 
 
          } 
 
      </style> 
 
  </head> 
 
  <body> 
 
  <div class="box1"> 
 
      <div class="main"> 
 
      <div class="box2"></div> 
 
      </div> 
 
  </div> 
 
  </body> 
 
  </html>

文本的水平居中:text-align: center;

文本的垂直居中:行高=盒子的高度

多行文本垂直居中: 算出多行文本的高度, 用padding-top: 顶下来

css中有三种方式让盒子脱标: 浮动, 绝对定位, 固定定位

二.经常使用css的属性

1.文本属性:

文本对齐: text-align: right; (left, center, justify: 两端对齐,只适用于英文)

首行缩进: text-indent: 2em;

文本修饰: text-decoration: none; #经常使用作清除a标签默认的下划线(dicoration: 装饰)

: text-decoration: underline; #加下划线

: text-decoration: overline; #加上划线

: text-decoration: line-through; #加删除线

: text-decoration: inherit; #继承父标签的此属性(默认text-xxx就是继承父标签的,能够省略)

行高: line-height: 40px;(单行文本居中ling-height=height的值)

2.字体属性

字体大小: font-size: 16px;

字体粗细: font-weight: 400; (默认400没有px, 范围100~900: 400=normal,hold=700)

border:

bold:

normal:

lighter:

inherit:

字体系列: font-family: "华文行楷", "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;

多个字体用逗号分隔, 表示从前日后在你的电脑上找这些字体, 若是都没有, 默认是宋体展现

sans-serif: 无衬线 serif: 有衬线

3.综合设置:

font: 14px/1.5 "华文行楷"

font: 14px/21px "华文行楷" #这两同样的效果

4.背景设置:(背景: background)

背景色设置有三种方式:

red;

background-color: rgb(255,0,0); #red green blue(0~255每种颜色都有256个)

background-color: rgba(0,0,0,.5); #透明度 #0,0,0黑色, 255,255,255白色 #.5透明度

background-color: #ff0000; #就是rgb的十六进制表示

background-color: #f00; #两两分组, 若是三个小组里的都同样, 那么能够缩写

背景图片设置:

background-image: url(); #默认背景图填不满时: 为平铺

background-repeat: no-repeat; #不重复, 填不满那无论; repeat: 这个是默认的; repeat-x: 只横向平铺; repeat-y: 只纵向平铺

background-position: 0 0; #两个值, x轴和y轴;

background-position-x:0;

background-position-y:0;

background-position: center top; #让一个大图在一个页面顶部居中显示: center(中心显示)

用background-position作个截图: (精灵图技术: 作图片的性能优化, 把不少的小图片放在一张大图上, 用css的截图来切你须要的小图(由于img的src每次都发一次请求, 浪费资源))

图片大小: 父盒子的宽高来搞

x,y的起始位置: 用background-position:负数; 来搞

background-attachment: fixed; #(附件: 固定) #背景图固定, 不随滚轮滚动

background:(综合属性: 可以使代码变少, 简化代码)

background: url() no-repeat 0 -162px;

三.定位

有4种:

1.默认是: position:static; 静态定位

2. position: relative; 相对定位

标准文档流下的相对定位:

单独设置盒子的相对定位不会对这个盒子有任何影响

一个盒子有了相对定位属性:就能够用top, left, right, bottom属性

若是两个相邻的盒子都有相对定位: 后写的层级压盖权重大; 可是能够用 z-index: 5; 来调整

不脱标

先要找个参考点: 它的参考点是它原来的位置, 可是它的壳还在原来的地方(形影分离);

做用: 1.层级提升, 能够作压盖, (可是不建议这样搞)

2.布局方案, 作子绝父相的参考

3.position: absolute; 绝对定位

非标准文档流下的绝对定位:

position: absolute;

脱标了; 不占位置

层级提升了

position: absolute:

top: 0;

left: 0;

css中: 调整层级使用绝对定位

先找个参考点:

单个盒子: 若是以 top描述: 它的参考点是页面的左上角, 坐标轴的(0,0)点

若是以bottom描述: 它的参考点是浏览器的最下边

通常应用: 子绝父相

父盒子设置相对定位

子盒子设置绝对定位, top时, 定位是父盒子的左上角

浮动和定位之间不受影响:

通常大盒子用浮动, 每一个盒子的内部进行定位调整

 
  <!DOCTYPE html> 
 
  <html lang="en"> 
 
  <head> 
 
      <meta charset="UTF-8"> 
 
      <title>Title</title> 
 
      <style> 
 
          *{ 
 
              padding: 0; 
 
              margin: 0; 
 
          } 
 
          .father{ 
 
              width: 1226px; 
 
              height: 300px; 
 
              position: relative; 
 
              margin: 0 auto; 
 
          } 
 
          .b{ 
 
              position: absolute; 
 
              width: 30px; 
 
              height: 30px; 
 
              line-height: 30px; 
 
              text-align: center; 
 
              color: #fff; 
 
              top: 50%; 
 
              right: 0; 
 
          } 
 
          .a{ 
 
              position: absolute; 
 
              width: 30px; 
 
              height: 30px; 
 
              line-height: 30px; 
 
              text-align: center; 
 
              color: #fff; 
 
              top: 50%; 
 
              left: 0; 
 
          } 
 
      </style> 
 
  </head> 
 
  <body> 
 
      <div class="father"> 
 
          <span class="a"><</span> 
 
          <span class="b">></span> 
 
      </div> 
 
  </body> 
 
  </html>

4.position: fixed; 固定定位