CSS学习笔记


前方挖坑。。
box-sizing:border-box; 解决border和padding把盒子撑大的问题。
list-style:none;取消li前面的小点
text-decoration:none;取消a链接的下划线

文档流

分为:标准流、浮动、定位

浮动

  • float:left(right/none);

可以使三个div占一行(如果使用display:inline-block,三个div会有间隙)。

  • 浮动首先创建块的概念(包裹)。
  • 浮动的元素总是找离他最近的父级元素的内边距对齐。
  • 元素排列:和上一个浮动元素顶部对齐,和上一个不浮动元素底部对齐。
  • 行内元素添加浮动后会有 行内块 特性。

版心与布局流程

  • 版心(可视区)
    常见宽度:960px,980px,1000px,1200px.
  • 布局流程
    1、确定页面可视区
    2、确定行模块以及列模块
    3、制作HTML结构
    4、CSS初始化
  • 一列式
    /*相同的样式,选择 并集选择器*/
    .top,
    .banner,
    .main,
    .footer{
      width: 960px;
      text-align: center;/*文字居中对齐*/
      margin: 0 auto;/*盒子居中对齐*/
      margin-bottom: 10px;
    }
    .top{
      height: 80px;
      background-color: pink;
    }
    .banner{
      height: 120px;
      background-color: purple;
    }
    .main{
      height: 500px;
      background-color: hotpink;
    }
    .footer{
      height: 150px;
      background-color: black;
    }
  </style>
  • 两列式
	.main{
   	  width:960px
      height: 500px;
    }
    .left{
      width: 350px; /*给边距留出10px 350+10+600=960*/
      height: 500px;  /*高度不继承*/
      background-color: skyblue;
      float: left;
    }
    .right{
      width: 600px;
      height: 500px;
      background-color: salmon;
      float: right;
    }
  • 平均布局式
    太简单懒得写了

清除浮动

clear:both;

  • 本质
    解决父级元素因为子级元素浮动而引起了高度为0的问题。
  • 额外标签法
    在浮动盒子后添加一个空盒子(结构混乱,不推荐)
  • 父级overflow法
    在父级盒子里添加:overflow:hidden;(触发BFC)
    (会导致溢出元素隐藏)
  • after伪元素法
    .clearfix:after{
      content: "."; /*内容小点,不要空,否则旧版本有空隙*/
      display: block; /*转换为块级元素*/
      height: 0;
      visibility: hidden;/*隐藏盒子*/
      clear: both;/*清除浮动*/
    }
    .clearfix{
      *zoom:1; /*只有ie6.7才执行*/
    }
  • 双伪元素法(推荐)
.clearfix:after,
   .clearfix:before{
     content: "";
     display: table; /*触发BFC 防止外边距合并*/
   }
   .clearfix:after{
     clear: both;
   }
   .clearfix{
     *zoom:1; /*只有ie6.7才执行*/
   }

定位属性

1.边偏移
top bottom left right
2.定位模式
选择器{position:属性值;}

静态定位:static

对边偏移无效
一般用来清除定位

相对定位:relative

以自己的左上角为基点,继续占有原来的位置,仍处于标准流

绝对定位:absolute

脱离标准流
若父亲没有定位,以浏览器为基准对齐
若父亲有定位,以父亲为基准对齐

子绝父相

相对定位:占有位置 不脱标
绝对定位:不占位置 脱标

居中对齐

left:50%;
margin-left:-自己大小的一半;

固定定位:fixed

1、以浏览器为准,与父亲无关
2、完全脱标,不占有位置,不随滚动条滚动

叠放次序:z-index

1、默认为0,数字越大,顺序越前
2、若取值相同,则按书写顺序,后者居上
3、不能带单位
4、只有相对定位,绝对定位,固定定位有这个属性

定位模式转换

添加了absolute或者fixed之后,自动转换为行内块模式。

显示与隐藏

display 显示(一般使用这个)

display:none 隐藏
display:block 显示
特点:不保留位置

visibility 可见性

visible:可视
hidden:隐藏
特点:保留原有位置

溢出:overflow

visible:不剪切内容也不添加滚动条
auto:超出自动显示滚动条
hidden:超出部分隐藏
scroll:总是显示滚动条

鼠标样式:cursor

default 小白
pointer 小手
move 移动
text 文本

轮廓:outline

outline:outline-color outline-style outline-width
取消轮廓线:outline:0;

防止拖拽文本域:resize

textarea 文本域{
resize:none;
}

垂直对齐:vertical-align

vertical-align:baseline top middle bottom
主要作用:图片、表单和文字对齐
特点:对块元素无效

去除底边图片缝隙(低级浏览器)

1、给img vertical-align:middle/top,让图片不和基线对齐
2、给img 添加 display:block;

文字溢出

word-break

主要处理英文
normal 浏览器默认换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行

white-space

可以用于中文,通常我们使用于强制一行显示内容
normal:默认
nowrap:强制一行

text-overflow 文字溢出

clip:不显示省略标记
ellipsls:显示省略标记(…)

首先要white-space:nowrap
搭配 overflow:hidden
再使用text-overflow:ellipsls

CSS精灵技术

本质:一种处理网页背景图像的方式

使用 background-position进行精确定位

字体图标:iconfont

优点:
1、可以改变透明度、旋转度等
2、本质是文字,可以随意改变颜色、阴影、透明等
3、体积小
4、支持几乎所有浏览器
5、移动端必备

过渡效果

transition:过渡属性 花费时间 运动曲线 何时开始(多属性用逗号隔开)

transition-duration:花费时间 单位s必须写

transition-timing-function:默认ease(逐渐慢下来)
ease-in(加速) ease-out(减速) ease-in-out(先加速后减速)linear(匀速)

transition-delay:开始时间 默认0s

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值