[转行Day04] CSS (1)

培根随笔画
130 阅读9分钟

引入CSS

  1. 行内样式表
  2. 内部样式表
  3. 外部样式表
<link rel=”stylesheet” href=”css 文件路径”>

三大特性

  1. 层叠性：样式冲突，遵循就近原则。哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠
  2. 继承性：子标签会继承父标签的某些样式（text-， font-， line-， color）恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
  3. 优先性：当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性；选择器不同，则根据选择器权重执行 !important>行内样式>id选择器>类、伪类选择器>元素选择器>继承或通配符选择器

元素显示模式

  1. 块级元素：h1-h6, p, div, ul, ol, li, form
  2. 行内块元素：img, input, td
  3. 行内元素：a, span, textarea, select
元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽高容器100%容器级可以包括任何标签
行内块元素一行可以放多个行内块元素可以设置宽高本身内容的宽度
行内元素一行可以放多个行内元素不可以直接设置宽高本身内容的宽度容纳文本或其他行内元素

显示模式转换display: block/inline-block/inline

选择器

  1. 标签选择器、类选择器、id选择器、通配符选择器
  2. 后代选择器元素1 元素2{样式声明} 指父元素1内的所有后代元素2
  3. 子选择器元素1>元素2{样式声明} 指父元素1内的所有最近一级子元素2
  4. 并集选择器元素1, 元素2{样式声明} 指元素1和元素2
  5. 伪类选择器
  • 链接伪类选择器a:link, a:visited, a:hover, a:active
  • focus伪类选择器input:focus

字体属性

  1. font-style: normal/italic
  2. font-weight: lighter/400/700/bolder
  3. font-size/line-height: 默认16px
  4. font-family: 'Microsoft YaHei', arial, Tahoma, 'Hiragino Sans GB'

文本属性

  1. 颜色color
  2. 水平对齐text-align: center/left/right
  3. 装饰text-decoration: none/underline/overline/line-through
  4. 缩进text-indent: 2em/2pt/2px
  5. 行间距line-height=文本高度+上间距+下间距：通过令文本的line-height == 盒子的高度实现文本在垂直方向的居中

背景属性

  1. background-color: color/rgba()
  2. background-image: none/url
  3. background-repeat: repeat/no-repeat/repeat-x/repeat-y
  4. background-attachment: scroll(默认)/fixed(固定)
  5. background-position: x y

盒子模型

标准盒子模型width和height指content的宽高

  1. content
  2. padding
  3. border
  4. margin：在已设置块级盒子宽度的情况下，margin: 0 auto; 设置块级盒子水平居中。要设置盒子内的行内(块)元素水平居中，需使用text-align: center

注意

相邻块元素垂直外边距的合并：对于两个相邻关系的块元素，上边的元素有 margin-bottom，下边的元素有 margin-top，则此时的边距并非两个之和，而是以最大的外边距为准。【解决方案： 尽量只给一个元素添加 margin】

嵌套块元素垂直外边距的塌陷： 对于两个嵌套关系的块元素，父元素有上边距的同时子元素也有上边距，此时父元素会塌陷较大的外边距值。【解决方案：为父元素定义上边框/上内边距/添加overflow:hidden。其中最后一种不会改变盒子大小，较为常用。 还有浮动、固定、绝对定位等方法。】

类名定义给每个盒子定义类名，便于找到各个盒子；给固定的样式定义类名，便于重复使用。两者结合使用。

网页布局

网页布局第一准则：多个块级元素纵向排列找标准流；横向排列找浮动。
网页布局第二准则：先设置盒子大小，再设置盒子的位置。

传统网页布局的三种方式：普通流（标准流）、浮动、定位。

  1. 标准流：标签按照规定好的默认方式排列
  2. 浮动：float
  3. 定位：position

页面布局整体思路：

  1. 必须确定页面的版心（可视区），通过测量得知；
  2. 分析页面中的行模块，每一行中的列模块（页面布局第一准则）；
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置（页面布局第二准则）；
  4. 制作 HTML 结构。（先有结构，后有样式的原则）；
  5. 先理清楚布局结构，再写代码，多写多积累。

CSS 属性书写顺序：

  1. 布局定位属性：display/position/float/clear/visibility/overflow
  2. 自身属性： width/height/margin/padding/border/background
  3. 文本属性： color/font/text-decoration/text-align/vertical-align/white-space/breakword
  4. 其他属性（W3C）： content/cursor/border-radius/box-shadow/textshadow/background: linear-gradient…

浮动

简介

float 属性用于创建浮动框，将其移动到一边， 直到边缘触及包含块或另一个浮动框的边缘。float: left/right最典型应用：让多个块级元素一行内排列显示

特性

  1. 浮动元素会脱离标准流，浮动到指定位置，且不再保留原先的位置。
  2. 浮动元素会一行内显示， 元素顶端对齐排列，相互贴靠在一起，放不下的会另起一行显示；
  3. 任何元素都可以浮动。添加浮动之后， 元素会具有行内块元素的特性，可以设置宽高。 没有设置宽度的元素在添加浮动后，大小根据内容来定。
  4. 浮动元素经常和标准流父级搭配使用。先用标准流的父元素排列上下，内部子元素再采取浮动排列左右。
  5. 一个元素浮动了，理论上其余的兄弟元素也要浮动。 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动

原因

父级盒子很多情况下不方便给高度或高度不固定，但子盒子浮动又不占有位置，导致父盒子高度为 0，使下面的标准流盒子上移，对排版产生影响。

本质

  1. 清除浮动的本质是清除浮动元素脱离标准流所造成的影响。如果父盒子本身有高度，则不需要清除浮动。清除浮动后，父级会根据浮动的子盒子自动检测高度，父级有了高度就不会影响下面的标准流。
  2. 语法：选择器{clear:属性值 left/right/both;}实际开发中几乎只用 clear: both;
  3. 清除浮动的策略是闭合浮动。

实践

额外标签法：在浮动的子元素后面再添加一个块级元素，给其设置clear属性
<div 父元素>
    <div 浮动的子元素></div>
    <div 添加的额外标签 style="clear:both;"></div>
</div>

父级添加overflow
<div 父元素 style="overflow: hidden;">
    <div 浮动的子元素></div>
</div>
/* 以下常用*/
父级添加:after伪元素
<style>
    .clearfix:after {
        display: block;
        content: '';
        clear: both;
        visibility: hidden;
        height: 0;
    }
</style>
<div 父元素 class="clearfix">
    <div 浮动的子元素></div>
</div>

父级添加双伪元素
<style>
    .clearfix:before, .clearfix:after {
        display: block;
        content: '';
    }
    .clearfix:after {
        clear: both;
    }
</style>
<div 父元素 class="clearfix">
    <div 浮动的子元素></div>
</div>

定位

简介

  1. 可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。
  2. 定位：将盒子定在某一个位置。 定位=定位模式+边偏移。
  3. 定位模式：用于指定一个元素在文档中的定位方式。position: static 静态/relative 相对/absolute 绝对/fixed 固定;
  4. 边偏移：决定了该元素的最终位置。top/bottom/left/right: XXpx; 顶部/底部/左侧/右侧偏移量。 如果一个盒子既有 left 又有right 或者既有 top 又有 bottom，那么执行 left 或 top

定位模式

静态定位static

按照标准流特性摆放位置，没有边偏移。【不脱标。 布局时很少用到。】

相对定位relative

  1. 元素在移动位置的时候，是相对于它原来的位置来说的。
  2. 元素移动后，原来在标准流的位置继续占有，后面的盒子依然以标准流的方式对待它。【不脱标。布局时常见的应用是给绝对定位当父盒子；鼠标划过发生位移。】

绝对定位absolute

  1. 元素在移动位置的时候，是相对它的祖先元素来说的。如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位；如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素的参考点移动位置
  2. 绝对定位不在占有原先的位置。【脱标。布局最常用于轮播图的按钮和圆点】

子绝父相布局

  1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不影响其他的兄弟盒子；
  2. 父盒子需要加相对定位限制子盒子在父盒子内显示。

固定定位fixed

  1. 元素固定在浏览器可视区的某个位置。以浏览器的可视窗口为参照点移动元素，与父元素无关；
  2. 不随滚动条滚动而滚动；不占有原先的位置。【脱标。在浏览器页面滚动时元素的位置不变】

固定在版心右侧

先通过绝对定位 left:50%，走浏览器宽度的一半，再 margin-left:50%的版心宽度+几 px 保持美观。

特性

  1. 定位叠放次序{z-index: 正整数/负整数/0/默认 auto} 控制盒子在重叠方向上的前后次序。 属性值越大，盒子越靠上；属性值相等，按照书写顺序，后来居上； 数字后没有单位；只有定位的盒子才有 z-index 属性。
  2. 绝对定位的盒子居中：加了绝对定位的盒子不能通过 margin: auto;设置居中。
  3. 绝对定位和固定定位与浮动类似：行内元素添加定位后可以设置宽高；块级元素添加定位后如果不给宽高，默认是内容的大小。
  4. 绝对定位和固定定位会完全压住盒子：浮动只会压住下面标准流的盒子，不会压住盒子里面的文字/图片；绝对定位和固定定位会压住下面标准流的所有内容。【原因在于浮动最开始产生的目的是实现文字环绕。】
avatar
文章
阅读
粉丝