HTML、CSS总结

来源：互联网发布：php提权编辑：程序博客网时间：2024/05/29 03:41

前言

怎么说HTML、CSS呢？对于我一个搞后端的来说，HTML、CSS这些东西因为用的很少，但是有时候领导脑门抽了非得让我写。。。虽然这些东西学起来简单，但是用的少的话真的很容易忘掉的啊。。。而且HTML、CSS还不像后台JavaEE一样有一大套的前后逻辑在里面，理解了逻辑基本上技术就不容易忘记了。但是HTML、CSS都是一堆各种标签、各种属性，没多大逻辑可言，我觉着要想学的好除非多用、多记、多背、完完全全是一个文科性质类的东西。。。没办法，那么我就把HTML、CSS中经常用到的一些标签、属性总结下来，死记硬背一下吧。。。

HTML

直接用百度脑图辅助记忆比较好
HTML百度脑图（百度良心作品，越来越好使了）链接：
http://naotu.baidu.com/file/bef83f06e0db09f7cce3bd619e449902?token=b5aa0639970bb711

CSS

CSS百度脑图：
http://naotu.baidu.com/file/caf07b9cb5a1866c8e3b3d60777bd425?token=1ef781072990c128
CSS因为零碎知识点太多，没法形成系统，用脑图没办法概括性的进行总结，下面还是分别对知识点进行总结吧
* 表格相关的样式设置：

table,td,th {    /*solid：设置边框线样式为实线*/    border: 1px solid black;}table {    width: 80%;    /*折叠边框*/    border-collapse: collapse;    /*将表格水平居中*/    margin: auto;}th {    background: lightgray;    height: 50px;}td {    text-align: center;}

CSS常用标签所占域：
- < h1 >、< div > < p >标签均为块标签
- < span >、< a >标签均为行内标签
CSS漂亮的div样式

div {                background-color: #ddffff!important;                padding: 14px;                border-left: 6px solid #ccc!important;                border-color: #2196F3!important;}

outline与margin的关系
- outline是紧贴着border划线的，margin外边距也是紧贴着border计算外边距的。
浮动float属性的理解
- 浮动其实就是相当于图层，开启一个元素的浮动等于说将其上升了一个图层，更形象的，就是“飘起来了一层”，因为其飘起来了，所以其后的元素会占用其原来的位置，出现重合的现象，但是元素内容会围绕它。若是彼此相邻的均为浮动元素，那么这两个浮动元素就相当于在一个图层，将彼此相邻
移除列表去哪的小标志
- list-style-type:none
position的活学活用：自定义下拉框
- 设置父元素的position为相对定位元素，然后设置其子元素的position为绝对定位元素，这样就能确保无论父元素的位置如何更改，子元素也会相应的跟着改变

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .out {                position: relative;            }            .outcontent {                display: none;                position: absolute;                width: 80px;                background: grey;            }            .out:hover .outcontent {                display: block;            }        </style>    </head>    <body>        <div class="out">            <span>点我看效果</span>            <div class="outcontent">                <p>手机</p>                <p>电脑</p>            </div>        </div>    </body></html>

p标签的首行缩进

p {    text-indent: 2em;}

设置背景图像是否平铺
- 需要用到background-repeat属性
  - background-repeat:repeat-x;设置图像只在水平方向平铺
  - background-repeat:repeat-y;设置图像只在垂直方向平铺
  - background-repeat:none;设置图像不平铺

0 0