欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS - 基础篇

程序员文章站 2022-05-26 22:29:45
...
  1. 什么是CSS？CSS指层叠样式表（Cascading Style Sheets），样式通常存储在样式表中。
  2. CSS 作用：可以让相同的一个页面在不同的浏览器当中呈现相同的样式。
    CSS - 基础篇
  3. 老师上课第一句话：先学主干（最常用），再学分支。否则一开始从细节开始学，永远都学不完，效率也底，信心也打击。
  4. 语义化——i:小图标；b:数字； ul li:导航栏、列表、功能模块(ol一般不用)； p/span:文字。
  5. a:href 若不知道，暂用“#”替代。
  6. logo+文字，建议 logo 用 background 做，否则 logo 和文字对齐很麻烦，需要定位来做。
  7. 碰到一些模块布局，可以去看大型网站的规则。
  8. 扩展性：菜单栏 li 不推荐用 width，用 margin 来扩充，因为 width 字数多的话可能引起布局的问题。
  9. 扩展性：菜单栏 div 不推荐用 height，用 line-height 来扩充。
  10. padding 对实体起作用，所以对背景不会起作用，背景不属于实体。
  11. css 多的话，推荐横着写“.xxx{ a:b; c:d }”，帮助定位查找（注意：空格、格式）。
  12. a:link、visited、hover、active，注意顺序，继承作用，一般link、visited配置一样，写在一起，hover单独配置，active不需要配置。注意：其他标签也类似，选择器:伪元素。
  13. css 优先级问题。点击打开链接
  14. 行内元素+<br> ~ display:block。
  15. 0可省略px，非0不可省略px。
  16. / ./ ../ 区别。点击打开链接
  17. 后代选择器：div .a1{...} /* 当前 div 无效 */ 
    div .a1{ color:blue; }
<div class="a1">我是div</div>
  18. ul li的固定结构，禁止2个<li>之间穿插其他任意标签，但是单个<li>标签里面可以插入其他任意标签。
  19. 使用<ul><li></li><li></li><li></li></ul>一定要去掉其固有的样式和间距方法：ul{ margin:0px; padding:0px; list-style:none }。
  20. 能用 CSS 就不要用 JS，因为 JS 会占用内存、加载速度。如：第20条。
  21. 每次 float 完毕，最后都给它 clear:both 。点击打开链接
    输入框和按钮对齐，比如：百度首页，可以用 float 小技巧。
  22. 导航菜单显隐（CSS 方案替代 JS） 
    /* 导航菜单显隐（CSS 方案替代 JS） */
.nav .menu{ display:none; }
.nav ul li:hover .menu{ display:block; }

<div class="nav">
	<ul>
		<li>女装
			<div class="menu"><a>1</a><a>2</a></div>
		</li>
	</ul>
</div>
  23. position:absolute/relative/fixed。点击打开链接
  24. opacity(不透明性) /* 把当前整个元素透明掉，包括里面的内容 */
  25. background:rgba(255,255,255,0.5) /* 只透明背景 */
  26. box-shadow:inset px px px px rgb /* 左上角为(0,0)，Y轴向下为正，X轴向右为正。参数：投影方式  X轴  Y轴  模糊半径  扩展半径  颜色 */ /* 多边不同投影 */ /* text-shadow 也类似这种做法 */
  27. 为什么 CSS 选择器是从右往左解析？为什么通配符选择器不推荐使用？为什么 CSS 层次不建议太多？点击打开链接
  28. 下拉菜单既想与导航栏有空隙，也想鼠标滑动到上面空隙处不会 li:hover 效果消失： 
     /* 下拉菜单既想与导航栏有空隙，也想鼠标滑动到上面空隙处不会 li:hover 效果消失 */
 
 .menu-bridge{ margin-top:15px; }
 
 <div class="nav">
	<ul>
		<li>女装
			<div class="menu">
				<div class="menu-bridge"><a>1</a><a>2</a></div>
			</div>
		</li>
	</ul>
 </div>
  29. input 标签初始化：input{ margin:0; padding:0; outline: 0; }，属于行内替换元素。
  30. background-size：cover; 是让该容器里的背景图强行等比例放大或者缩小，来填充该容器的所有空间，该属性很可能不会让背景图显示完整，只显示部分。
    background-size:  contain; 是让该容器里的背景图强行等比例放大或者缩小，当宽度或者高度只要一方填满，就停止，该属性一定会让背景图显示完整。
  31. 表单元素：一般只可修改 输入框、按钮 样式，其他不要修改，很复杂，网上的一些炫酷元素，比如：下拉菜单、单选框...是用 div + js 模拟出来的。
  32. position:absolute、float、display:block：都可以把行内元素转化成块级元素。
  33. text-align:center：对块级元素无效的，只能对块级元素里的文字和图片有效的。
  34. 网上看到一张图有很多元素（一张网页的元素都集成在一张图里），为的是减少服务器的请求，减轻压力。
  35. CSS 盒子模型。点击打开链接
  36. transition:width 1s 2s linear;  参数：全部属性(默认不填)  执行时间  延迟时间  速率方式。
    Ps1：速率方式：
    ease-in-out：先加速后减速（默认）。
    linear：匀速（常用）。
    Ps2：多个属性 transition，可以用逗号。
  37. overflow:hidden; 将包含在里面的内容超出当前的实际宽度、高度，则隐藏。
    overflow[-x / -y]:auto：超出部分自动处理，会通过滚动条的方式。
  38. transform:
    rotate(度); /* 旋转 */
    scale(x,y); /* 缩放,倍数关系:x/y轴 */
    Ps：在scale()函数中，取值除了可以取正值之外，同时还可以取负值。只不过取负值时，会先让元素进行翻转，然后在进行缩放。
    CSS - 基础篇
    skew(度); /* 倾斜，不常用 */
    translate(px,px); /* 位移，与margin不一样，margin不会穿透，translate会穿透 */
    transform-origin:left bottom; /* 轴心点：先左右再上下，也可以用 px 控制 */
    transform:rotate(60deg) scale(1.2) translate(45px) skew(30deg); /* 写多个属性的时候，用空格隔开 */
  39. dispaly:inline-block：同时拥有行内元素横向排列 和 块级元素能控制宽高的特征，可用于代替float(常用于div的横向排列，同时又需要保持该div的宽高控制，但是inline-block在标签不换行的前提下会产生间隔，同时对IE8以下浏览器不兼容，一般还是用float会比较安全)。
    Ps：虽然方便，但是属于 CSS3 兼容性不是很好，所以不建议 PC 端用这个玩意，手机端可以使用。 
  40. 定义动画：
    @keyframes  动画名称{ 0%{ 动画改变的属性} 50%{ 动画改变的属性} 100%{ 动画改变的属性} } /* 中间可以很多细粒度，比如：11%{...} */
    Ps：位置放在引用前还是后，无所谓，但推荐放在引用前，标准点。
    引用动画：
    Animation:动画名称 动画持续时间 动画速率 动画延迟时间 是否循环（infinite为一直循环，数字为循环次数，不写，默认不循环）
    如：animation:dh 2s linear 3s infinite;
    多个动画：animation:dh 2s linear 3s infinite,dh2 2s linear 3s infinite;
    Ps1：一个完整的动画过程：
                                            开始：0----->50
                                            回来：100<--50
    Ps2：保持往返状态：0%、100% 状态必须一致。
  41. [条件]{...} 如：
    [src]{...} /* 具有src属性的元素 */
    [class='pic']{...} /* 具有class='pic'属性的元素 */
    img[class]{...} /* 具有class属性的img元素 */
  42. 伪元素：
    .box:after{...}
    .box:before{...}
    Ps：在class="box"的元素内部添加元素。after:常用于清楚浮动，不用手写div来清除是因为服务器少渲染一个div，减轻负担。
  43. word-spacing:字与字之间空格的宽度；letter-spacing:字与字之间的间距。
  44. display:none;（不占空间），visibility:hidden;（占空间）。
  45. word-wrap:break-word:强制换行，解决在英文状态下的字符(如：!，感叹号)、字母、数字，超出了 div 的宽度的情景下没有自动换行，中文状态下的字符、中文是会自动换行的。
  46. <map><area /></map>：热区，比如：地图上一块一块标记超链接。
  47. 锚点定位：
    <a name="a1">位置</a>
    <a href="#a1">跳转</a>
  48. H5标签使用：PC端，不要用H5标签，兼容性很差，需要较高的浏览器；但移动端可以用用。
  49. ID选择器：常用于JS获取指定的操作对象，目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现逻辑错误。
  50. H5新标签——语义化的标签：

    CSS - 基础篇

    H4

    CSS - 基础篇

    H5

    优点：将原来div标签换成新的容易识别的名称标签，叫做标签的语义化，标签语义化的目的就是对搜索引擎友好，结合简洁清晰的布局结构，能更容易被搜索引擎抓取，这种符合搜索引擎收索规则的做法，网站的推广便可以省下不少钱，而且可维护性更高，因为结构清晰，十分易于阅读。标签语义化其实就是把你想要表达的东西更容易被搜索引擎理解和重视。
  51. SVG 指可伸缩矢量图形 (图像在放大或改变尺寸的情况下其图形质量不会有损失）。
    SVG 使用HTML元素绘制的2D图形。
    SVG 图像可通过样式或JS来控制和修改。
    SVG 图像可被搜索、索引、脚本化或压缩（比普通图像占空间更小）。
    简单来说，是用HTML创建的矢量图形，类似文字一样可以随意更改其大小和颜色，和PS里做的JPG有本质区别，常用于移动端中。
    复杂SVG图形直接在AI里绘制好后另存为SVG, 能生成path(路径)标签，要记得另存SVG的时候，要将图形里的所有路径复合（合并一起），免得生成的path太多，控制起来麻烦，框选所有路径，对象→复合选项→建立。
    控制svg颜色宽高边框都可以通过css来控制，但是控制其大小有窍门，必须先设置好视区范围——viewBox="x, y, width, height"  定位起始位置x:左上角X坐标，y:左上角Y坐标，width:宽度，height:高度，一般来说XY都设为0。里面的宽高要跟AI里那图标的宽高一模一样，然后在控制svg标签里的宽高即可实现。
    Canvas——用JS来编写（实际中工作中用的很少）：
    固定的分辨率（和PS里一样的位图图形）；
    根据JS的判断和运算进行动态绘制，绘制可以来回重复，适合于做游戏（游戏中会应用JS对事件的判断确定如何绘制图形）。
    SVG——用HTML编写：
    没有固定的分辨率（和AI里面一样的矢量图形）；
    纯粹的整片图形绘制，最适合带有大型渲染区域的应用程序（比如百度地图）。
  52. 以 border 制作三角形技巧（如：下拉菜单中的三角形）： 
    .btn{ width: 200px; height: 50px; background: #ccc; position: relative; }
.triangle{ border-top: 15px solid red;  border-left: 15px solid #000; border-right: 15px solid #fff; border-bottom: 15px solid #f00; position: absolute; left: 87px; top: 27px;}

<div class="btn">
	<div class="triangle"></div>
</div>
  53. 如何CSS绘制一个黑色倒三角形？ 
    .div1{
 width:0px;
 border:5px solid #fff;
 border-top:5px solid #000
 /* border-bottom:5px solid #000 */ /* 正三角形 */
}
<div class="div1"></div>
  54. 行内元素分为：行内替换元素、行内非替换元素。
    img、input 属于行内替换元素。height、width、padding、margin 均可用，效果等于块元素。
    其他我们常说的行内元素，这里指的就是行内非替换元素。
  55. CSS中注释只能是/**/，不能//。
  56. 如何让一个 div 水平垂直居中？ 
    方法1：
.div1{
         width:400px;
         height:400px;
         border:#CCC 1px solid;
         background:#99f;
         position:absolute;
         left:50%;
         top:50%;
         transform: translate(-50%,-50%);
}                        
<div class="div1"></div>

方法2：
.div2{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#99f;
    position: absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
<div class="div2"></div>

方法3：
.div3{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#9f9;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left:-200px;
    margin-top: -200px;        
}
<div class="div3"></div>
  57. user agent stylesheet：浏览器默认给的样式。
  58. 在实际开发中，不要使用单词样式，因为在不同的浏览器中可能呈现不一样的效果。
  59. CSS 外联样式写在里面还是写在另一个文件*.css，优先级是一样的。
  60. font 属性
    CSS - 基础篇
    CSS - 基础篇
    CSS - 基础篇
  61. 选择器
    a、实际开发中，id选择器不常用，因为复用性不高，而常用的是类选择器和元素选择器。偶尔还有属性选择器。
    CSS - 基础篇
    CSS - 基础篇
    CSS - 基础篇
    CSS - 基础篇
    CSS - 基础篇
    Ps：!important 在实际开发中，尽量少用。
    b、nth-child() 选择器
    CSS - 基础篇
    CSS - 基础篇
    CSS - 基础篇
  62. CSS 样式
    a、背景
    CSS - 基础篇
    CSS - 基础篇
    b、文本
    CSS - 基础篇
    c、字体
    CSS - 基础篇
    CSS - 基础篇
    Ps：CSS3 中设置自定义字体。
    d、链接
    CSS - 基础篇
    e、列表
    CSS - 基础篇
    Ps：可以改变无序列表的前面的标志。
    f、表格
    CSS - 基础篇
  63. CSS 布局
    a、两行三列布局 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两行三列布局</title>
    <style>
        html, body {
            margin: 0;
        }
        header {
            height: 100px;
            background-color: lightblue;
        }
        #container {
            height: 500px;
            background-color: lightgreen;
        }
        nav {
            float: left;
            width: 150px;
            background-color: lightyellow;
            height: 100%;
        }
        aside {
            float: right;
            width: 100px;
            background-color: orange;
            height: 100%;
        }
        article {
            overflow: hidden;
            background-color: lightcoral;
            height: 100%;
        }
    </style>
</head>
<body>
<header></header>
<div id="container">
    <nav></nav>
    <aside></aside>
    <article></article>
</div>
</body>
</html>
    b、三行两列布局 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三行两列布局</title>
    <style>
        html, body {
            margin: 0;
        }
        header {
            height: 100px;
            background-color: lightblue;
        }
        #container {
            height: 500px;
            background-color: lightgreen;
        }
        footer {
            height: 100px;
            background-color: lightslategray;
        }
        nav {
            float: left;
            width: 150px;
            background-color: lightyellow;
            height: 100%;
        }
        article {
            /*margin-left: 150px;*/
            overflow: hidden;
            background-color: lightcoral;
            height: 100%;
        }
    </style>
</head>
<body>
<header></header>
<div id="container">
    <nav></nav>
    <article></article>
</div>
<footer></footer>
</body>
</html>

     

  64. z-index 详解 点击打开链接
  65. CSS - 兼容 点击打开链接
  66. 待更新...

 

 

相关标签： CSS 前端

上一篇： PAT A1114 Family Property

下一篇： 使用python来保存win10的聚焦图片

推荐阅读