学习前端笔记

最新推荐文章于 2022-01-26 16:54:48 发布

horo99

最新推荐文章于 2022-01-26 16:54:48 发布

阅读量92

点赞数

分类专栏：学习文章标签： html5 css

本文链接：https://blog.csdn.net/oro99/article/details/115504291

版权

学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML

标题有六级h1~h6

<p> ... </p>    段落，文字独占一行
<i> ... </i>    斜体
<b> ... </b>    文字加粗
<del> ... </del>删除线
<sup> ... </sup>上标
<u> ... </u>    下划线
<center> ... </center>将文字居中

<br>  换行标记
<hr>  水平线
&nbsp;  空格

<a href="链接地址">  target="_blank" 新页面打开

无序列表

<ul type="">     disc 实心圆   circle 空心圆   square 方块（实心）
  <li>...</li>
  <li>...</li>
  <li>...</li>
<ul>

有序列表

<ol type="">  1数字排序  a小写字母排序   A大写字母排序   i罗马字母排序   I大写罗马字母排序
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

图片

<img title="鼠标停留提示" alt="加载失败" src="xxx.png" />

span标签

一个容器标签，不具备任何特殊功能，仅当做容器来使用。用于包裹一段文本，便于给文本增加样式。

div，一个通用的容器标签

不具备任何特殊功能，仅当做容器来使用。可以包裹任何内容，也可以容器互相包裹，甚至重叠覆盖。

一个空的div，高度为0，宽度为100%。

默认背景透明。文字超过div范围时会溢出来。

body

默认margin有一定距离，可以设置margin:0。默认宽度100%。其父元素为html。

文字灰色 #555。

二、CSS

1. 居中

居中文字垂直居中，设置行高 line-height:；

内部元素水平居中text-align:center。margin:auto 让容器在外层容器中水平居中。

text-decoration:none。让没有修饰，比如链接默认的下划线去掉。文本修饰只能针对当前元素有效。

border：solid 1px #555。 solid直线 dashed虚线

padding

2. 选择器

ID选择器：井号#

类别选择器：（点）类名

标签选择器：

通用选择器：*

组合选择器：（#id）（tagName）

多个选择器并列用逗号区分。

样式选择器权重值

冲突时，优先级问题

行内 >> ID >> 类别 >> 标签 >> 通用

权限值表。

1000， 100， 10， 1， 0

组合使用时就是表权限值相加。

伪类选择器

:hover :nth-of-type(1)

属性选择器

xxx[ attr = val]，attr$表示属性结尾，attr^表示开头。

例以“.pptx”结尾的 li a[href$='.pptx']{ }

3. 文本属性

字体 font-family: "华文中宋"、大小 font-size、颜色 color

加粗 font-weight:bold、倾斜 font-style: italic

行高 line-height:100px、首行缩进 text-indent:60px、水平对齐text-align: center、

文字修饰 text-decoration: underline

4. 图片

gif jpg png svg 图片压缩格式

gif，支持动画，只支持透明和不透明两种模式，只有256种颜色。

jpg，有损压缩算法，体积小，不支持透明，不支持动画。

png，无损压缩算法，体积相对较小，支持背景透明，不支持动画。

svg，矢量图，记录形状和颜色。不适合照片。

背景图

background-image: url(imgs/dog.gif);

background-repeat: no-repeat. 不平铺

background-position: right bottom; 水平和垂直对齐方式。 center

5.浮动布局float

浮动元素会脱离网页文档，与其他元素发生重叠，但不会与文字内容重叠（文字被挤开，文字环绕效果）。

浮动的元素与浮动的元素会被浏览器横向排列。

float取值：left right。

浮动元素会被非浮动元素隔开。

浮动子元素不会撑开父元素，可以①设置父元素高度；②overflow:auto；

为元素不受前面一个紧邻的浮动元素的影响，使用clear: left/right/both表示当前元素不收到左浮动、右浮动或两者的影响。即浮动元素在排列时，只参考前一个元素位置即可。如下：

  <style>
        ul{
            width: 300px;
            border: black solid 1px;
            overflow: auto;
        }
        li {
            list-style-type:none;
        }
        .left{
            float: left;
            background-color: beige;
        }
        .right{
            float: right;
            background-color: green;
        }
    </style>
    <ul>
        <li class="left">左浮动</li>
        <li class="right">右浮动</li>
        <li class="left" style="clear: both;">左浮动</li>
        <li class="right">右浮动</li>
        <li class="left">左浮动</li>
        <li class="right">右浮动</li>
        <li class="left">左浮动</li>
        <li class="right">右浮动</li>
        <li class="left">左浮动</li>
        <li class="right">右浮动</li>
    </ul>

浮动元素重叠问题：浮动元素不会覆盖 1. 文字内容；2.图片内容（图片看成一种特殊的文字）；3. 表单元素（单选框、复选框、输入框之类的）。

6. 盒子模型

边距、边框、内边距。

margin、border、padding。

margin:auto，可以让当前元素居中。

7. 属性简写

border

border-width 宽度 border-style 样式 border-color 颜色。只有颜色可以省略。

font

font-style:italic 斜体 font-weight: bold 加粗 font-family 字体种类 font-size 大小 line-height 行号。可以省略一部分，顺序要对。

margin边距、padding填充

上右下左；上左右下；上下左右；全部。

color

直接写英文名；rgb(255,255,255)；#十六进制；

8. 三大元素

（给a设置宽度、长度没有效果）

块元素：可以设置宽高大小，默认宽度为100%，并且独占一行。（默认为块元素的有：p、uli li、h1~h6、div、form、table）

内联（行内）元素：无法设置宽高，元素大小随内容改变，所有元素默认排在一行。（i、b、span、a）

内联块元素：既能设置宽高大小，又能排在一行显示。（img、input）

通过display:block inline inline-block。

内联元素表现的为文字特性，比如当给父元素设置text-align: center；时，内联元素表现为居中。块元素居中，margin:auto。

9.布局的定位

position: relative；相对的，是指其内部元素都相对于当前元素来定位；

position: absolute；绝对的，指其元素在父元素上来定位（或者更严格将，只要某个父元素设置了position，不管是relative、absolute还是fixed，都会成为子元素的参考系，如果找到顶层都没找到，会以浏览器窗口为参考系）。同时可以指定left和top来设置到左端和到顶端的距离。

position: fixed；固定定位。相对于整个页面。