css-basic

vvvvv1223
117 阅读4分钟

文本

对齐文本

text-align用于设置元素内文本内容的水平对齐方式

  • text-align: left/center/right

装饰文本

text-decoration添加文本修饰

  • text-decoration: none/underline/overline(上划线)/line-through(删除线)
  • 应用于a标签去除下划线

文本缩进

text-indent段落首行缩进

  • text-indent: 2em; 当前文字大小2个单位

行高

line-height由上间距、文本高度、下间距组成

想要图片居中对齐，让他父亲添加水平居中

选择器

链接伪类选择器

  • a: link 选择所有未被访问的链接
  • a: visited 选择所有已被访问的链接
  • a: hover
  • a: active
  • input: focus

元素

块元素

常见的块元素

  • h1-h6
  • p
  • div
  • ul、ol、li

特点

  • 独占一行
  • 高度、宽度、外边距及内边距都可以控制
  • 宽度默认是容器(父级宽度)的100%
  • 是一个容器及盒子 里面可以放行内或者块级元素

行内元素

常见的行内元素

  • a
  • span
  • strong

特点

  • 一行显示多个
  • 直接设置宽、高是无效的
  • 默认宽度为本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素

行内块元素

  • img
  • input
  • td

特点

  • 一行可以显示多个(行内元素特点) 但是它们之间会有空白缝隙
  • 默认宽度是本身内容宽度(行内元素特点)
  • 宽度、行高、外边距以及内边距都可以控制(块级元素特点)

元素显示模式转换

比如增加a标签链接的触发范围 转块元素然后设置宽高

背景

背景平铺

  • background-repeat: repeat/no-repeat/repeat-x/repeat-y

背景位置

  • background-position：x y;
  • 可以使用方位名词或者精确单位
  • position: top/center/bottom/left/center/right

当参数是方位名词

  1. 如果指定的两个值都是方位名词，则两个值的前后顺序无关，比如left top和top left
  2. 如果只指定了一个方位名词，第二个值默认居中。background-position: right; // 第二个参数默认为center

当参数是精确单位

  1. 如果是精确坐标，那么第一个是x坐标，第二个是y坐标
  2. 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

当参数是混合单位

  1. 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景附着

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

  • background-attachment：scroll(默认)/fixed

CSS的三大特性

继承性

  • 子元素可以继承父元素的样式(text-,font-,line-等以及color属性)
  • 行高继承：子元素继承父元素body行高的1.5，这个1.5是当前文字大小的1.5倍 
    body {
    font: 12px/1.5
}
div {
    /*这个1.5就是当前元素文字大小font-size的1.5倍*/
    font-size: 14px;
}

盒子模型

使用外边距让块级盒子水平居中 需要满足两个条件

  • 盒子必须指定了宽度
  • 盒子左右的外边距都设置为auto

行内元素和行内块元素居中

  • 给其父元素添加text-align: center即可

浮动

为什么需要浮动？

  1. 如何让三个div在一行显示
  • 可以使用display: inline-block; 但这样盒子之间会有间隙
  1. 如何实现两个盒子的左右对齐?

浮动最典型的应用: 可以让多个块级元素一行内排列显示

网页布局第一准则: 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动？

float将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动块的边缘

浮动特性

  1. 脱离标准流(文档流) 浮动的盒子不再保留原先的位置
  2. 多个盒子设置浮动会在一行内显示并且元素顶部对齐
  3. 会具有行内块元素的特性
  4. 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置 一般采用策略： 先用标准流的父元素排列上下位置，之后内部子元素采取浮动配列左右位置，符合网页布局第一准则

css3

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow: 必须。水平阴影的位置 允许负值
  • v-shadow: 必须。垂直阴影的位置 允许负值
  • blur: 可选。模糊距离
  • spread: 可选。阴影尺寸
  • color: 可选。阴影严肃
  • inset: 可选。将外部阴影改为内部阴影
  1. 默认外阴影 但是不能写outset 会导致阴影失效
  2. 盒子阴影不占用空间 不影响其他盒子排列

一些记录

  1. 父盒子有宽高 里面的img设置为宽度100% 会自动适应
  2. 没有宽度 padding不会撑开盒子的宽度
avatar
文章
阅读
粉丝