CSS学习笔记

一.  css布局方式:

  1. 默认的,按文档流的顺序,按HTML的结构顺序
  2. 浮动方市
  3. 定位方式
二.  css控制背景:
  1. background-color:#ccc;
  2. background-image:url(背景图像的位置及全称)
  3. background-repeat:[repeat、no-repeat、repeat-x、repeat-y](背景图像的重复方式
  4. background-position:top[left、center、right]  center[left、center、right]  bottom[left、center、right]  x坐标,y坐标[第一个位置是水平坐标,第二个位置是Y坐标]左上角是:0,0;单位是像素
  5. background-attachment:[scroll、fixed](背景图像的依附方式)fixed:背景不随鼠标的滚动而滚动,scroll:背景随鼠标滚动而滚动
三.  浮动
  1. 浮动是将块元素独占一行的属性取消,允许其他元素与其同行
  2. 浮动是将快元素从原来的文档流模式中分离出来,它后的对象,就视它不存在
  3. css把网页元素分为两类:一种是快,一种是内联元素;从快元素变为内联元素:display:inline,从内联元素变为块元素:display:block
  4. ul与li默认轻快下是块元素,要让他们在一行中显示,就要用到浮动
  5. 如果想让多个快,显示在同一行中,可以将,这些快,都设置为浮动,并且浮动方向相同
四.  清除浮动
  1. 清除浮动可以去除前面对象浮动,对后面对象的影响
  2. 当父元素,没有指定高度,并且子元素有浮动,这时,父元素的高度不会自动增加
  3. 方法一:增加一个空标签,这个标签要去除浮动;方法二:给父元素,加overflow:hidden
五.  定位布局position
  1. static:静态定位,页面中每个对象的默认值
  2. absolute:绝对定位,将对象从文档流中分离出来,通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位,如果不存在这样的父级对象,则依据body定位
  3. relative:相对定位,对象不从文档流中分离,通过设置left、right、top、bottom四个方向相对于自身位置进行相对定位
  4. 当我们要想要使用绝对定位时,有两个条件:【1】必须给父元素加定位属性,一般建议使用relative;【2】给子元素加absolute时要加方向属性。
  5. 相对定位与绝对定位:绝对定位是父元素为基准点,进行定位,会脱离文档流;相对定位是根据其自身为基准点,进行定位,离开原始位置,但还占着原来的空间。
六.  盒子模型属性
  1. 边界:margin(在盒子的外部)
  2. 边框:border(盒子的边框大小)
  3. 填充:padding(盒子内的填充物)
  4. 内容:content(填充盒子内的东西)

七.  logo优化

  1. logo图片尽量小
  2. 一般情况下是作为背景放入的
  3. 肯定加  h1   标签  提权
  4. 搜索引擎对文本链接最友好。  <a href = "#">百度一下</a>
  5. 一定给a添加  title属性,提高用户体验
八.  如果是行内元素,浮动之后就可以指定宽和高

九.  
  1. text-decoration:文字下划线
  2. a:link、a:visited、a:hover、a:active分别表示:链接、访问后、鼠标经过、鼠标点击
  3. vertical-align 设置元素的垂直对齐方式。


网页制作规则:能用标准流做的,就不用浮动流;能用浮动流做的,就不用定位流。

按照稳定性来说,首先考虑的是盒子本身的宽度和高度,其次,再考虑padding,最后margin

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值