全部标签
写点什么
MySQLOpenHarmony云计算程序员行业资讯算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业生涯规划知识管理运维产品经理 查看更多

CSS

作者：武师叔
  • 2022 年 8 月 18 日
    辽宁

  • 本文字数：2609 字

    阅读完需：约 9 分钟

CSS

定义页面样式。浏览器在构造完成页面的 DOM 树后，会解析 css 代码以及引入的 css 文件，将定义的样式表规则添加到对应的 DOM 树节点上。在绘制并渲染为用户可见的页面时使用。


选择器

选择器确定 CSS 样式的作用范围。


<div>  <h1>title</h1>  <p class="px" id="p1">first paragraph</p>  <p class="px" id="p2">second paragraph</p>  <a type="button" href="./next.html">next</a></div>
<style>div { letter-spacing:0.5em; }               /* 简单选择器 */.px { font-size:20px; }                     /* 类选择器 */ #p1 { color:brown; }                        /* ID 选择器 */ [type="button"] { display:block; }          /* 属性选择器 */             </style>Copy to clipboardErrorCopied
复制代码


复杂类选择器


<p class="important welcome">Hello</p>
<div class="warning">  <h1>NO</h1>  <p class="text">STOP</p></div>
<style>  /* 多重条件触发 */  .important.welcome { background:silver; }  /* 嵌套条件触发*/  div h1 { font-weight:bold; }      .warning .text { background:silver; }</style>Copy to clipboardErrorCopied
复制代码


定位方式

  1. 静态定位(static)：默认情况，元素从上到下依次放入 html 页面。

  2. 相对定位(relative)：根据其正常位置偏移。

  3. 绝对定位(absolute)：根据首个非静态父元素位置偏移。

  4. 固定定位(fixed)：相对于浏览器窗口偏移，即使滚动窗口也不发生改变。


  • position:relative; 设置元素为相对定位

  • position:absolute; 设置元素为绝对定位

  • position:fixed; 设置元素为固定定位


/* 绝对定位到父元素左上角 */.box {  position: absolute;  left: 10px;             /* 同时设置 left 和 right 会强置元素宽度 */  top: 10px;              /* 同时设置 top 和 bottom 会强置元素高度 */}Copy to clipboardErrorCopied
复制代码


子元素设置为 absolute 定位后，一般要把对应的父元素定位切换到 relative .


元素框

元素从外到内依次为：外边距(margin) > 边框(border) > 内边距(padding) > 内容(content)


外边距


  1. 默认透明。

  2. 上下两元素外边距取最大值：外边距重叠。

  3. 可以取负值：相邻两元素重叠。


.block {  margin: 0 30px;  border: 2px solid #88b7e0;  padding: 0 5px 0 10px;
  width: 100%;  height: 180px;}Copy to clipboardErrorCopied
复制代码


当元素大小随父元素浮动时，可以为元素最大或最小尺寸。


.block {  min-height: 70px;  max-height: 280px;}Copy to clipboardErrorCopied
复制代码


计算元素尺寸时，可以使用四则运算式。


.block {  min-height: calc(100% - 80px);  max-height: 100%;}Copy to clipboardErrorCopied
复制代码


元素放置

类型

  1. 块级元素

  2. 独占一行，可任意规定宽高和内外边距大小。宽度默认是容器的 100%，以容纳内联元素和其他块元素。

  3. 常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

  4. 内联元素

  5. 和其他内联元素分享一行，宽高随内容自动变化（无法设置），不可设置上下边距大小，但可以设置左右边距。行内元素内不能容纳块元素。

  6. 常用的行内元素有：<a>、<span>、、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  7. 行内块状元素


同时具备行内元素、块状元素的特点，和其他元素在同一行，高、宽和边距可以设置。


常用元素 <img>、<input>


  • display:block 设置为块级元素

  • display:inline 设置为内联元素

  • display:inline-block 设置为行内块级元素

  • display:none 不摆放该元素

居中

在父级父容器中让行内元素居中对齐：


  1. 水平居中


对于块状元素，只需要规定 margin: 0 auto ;


对于内联元素（如文本和链接），只需要在块级父容器中添加 text-align: center 。


  1. 垂直居中


对于已知高度的块状元素，通过


.parent { position: relative; } 
.child {   position: absolute;   top: 50%;   height: 100px;   margin-top: -50px; }Copy to clipboardErrorCopied
复制代码


对于未知高度的块状元素，通过（该方法也适用于水平居中）


.parent { position: relative; } 
.child {   position: absolute;   top: 50%;   transform: translateY(-50%);   /* left:50%;  transform: translate(-50%,-50%); */}Copy to clipboardErrorCopied
复制代码


对于内联元素，只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中。

可见

隐藏元素共有三种方式，效果不同：


  • display:none 元素不摆放，等同于没有

  • visibility:hidden 元素隐藏，不可用但仍占用布局空间

  • opacity:0 元素透明，可用但不可见（不透明度 0-1）


当多个元素堆叠在同一个位置时，可以指定摆放层次：


  • z-index: 5 元素摆放在第 5 层，同位置元素数值较大者用户可见


文本样式

基本

h2 {  color: white;                  /* 字体颜色 */  font-size: 15px;               /* 字体大小 */  font-family: sans-serif;       /* 字体样式 */}Copy to clipboardErrorCopied
复制代码

间距

  • letter-spacing:0.5em; 字符间距

  • word-spacing:0.5em; 单词间距（只对英文起作用）

  • text-indent: 2em; 首行缩进，设置为 2 字符

溢出

  • overflow-x:hidden; 水平方向：文本超出内容框后隐藏

  • overflow-y:auto; 垂直方向：视情况提供滚动条



图片样式

背景

background: url("../assets/x.jpg") no-repeat left; 背景图


表格样式

边框

table 有外边距(margin)，但有无内边(padding)距视情况而定：


  1. 【默认情况】单元格(td)分散


table {  border-collapse: separate;       /* 单元格分散，内边距有效 */  border-space: 0;                 /* 单元格间距，设为 0 起到紧贴效果 */   padding: 1px;                    /* 单元格和表格外框间距 */}Copy to clipboardErrorCopied
复制代码


  1. 【常用情况】单元格(td)紧挨


table {  border-collapse: collapse;       /* 单元格紧贴，内边距无效 */}Copy to clipboardErrorCopied
复制代码


tr 和 td/th 作为内部元素无外边距(margin)。

筛选

  1. tr：对指定行采用不同样式


/* 奇数行元素 */table tr:nth-child(odd){             background: #eeeff2; }  /* 偶数行元素 */table tr:nth-child(even){   background: #dfe1e7; }  Copy to clipboardErrorCopied
复制代码


  1. td：对指定列采取不同样式


/* 第3列以前的全部元素 */tr td:nth-child(-n+3){   text-align:center; }  /* 第4列以后的全部元素 */tr td:nth-child(n+4){   text-align:center; }
复制代码


划线
评论
复制
发布于: 刚刚阅读数: 4

版权声明: 本文为 InfoQ 作者【武师叔】的原创文章。

原文链接:【http://xie.infoq.cn/article/bfedbca87bb0cee5f5f14bed1】。文章转载请联系作者。

8月月更
用户头像

武师叔

关注

每天丰富自己，去过自己想要的生活！ 2022.04.28 加入

一个喜欢最新技术，研发的人工智能专业的大二学生，用自己的代码做一些有意义的事情！ 目前大二结束有去大厂研发岗实习的计划，每天丰富自己的技术，去过自己想要的实习生活。

评论

发布
暂无评论
Copyright © 2022, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
CSS_8月月更_武师叔_InfoQ写作社区