HTML、CSS总结

前言

怎么说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为绝对定位元素,这样就能确保无论父元素的位置如何更改,子元素也会相应的跟着改变

<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;设置图像不平铺

你可能感兴趣的:(HTML+CSS,css,html)