HTML&CSS | 小浩之随笔

发布日期: 2019-11-12

阅读次数:

HTML超文本标记语言，是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

语法规范：
1.所有的html文件后缀名都是以.html或者.htm结尾，建议使用
2.整个html文件分别由头部分和体部分组成
3.Html标签都是由开始标签和结束标签组成
4.Html标签忽略大小写，建议使用小写
5.有且仅有一个根标签

行内元素有哪些?块级元素有哪些?空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

html5文件基本结构

1.article 标记定义一篇文章
2.header 标记定义一个页面或一个区域的头部
3.navigation（nav）定义导航的链接
4.section 定义一个区域
5.aside 定义页面内容部分的侧边栏
6.figure 定义一组媒体内容以及他们的标题
7.figcaption 定义figure元素的标题
8.footer 定义一个页面或一个区域的底部
9.hgroup 定义文件中一个区块的相关信息

HTML文档的基本结构

<!DOCTYPE html> <!-- 用于声明、告诉浏览器当前是一个 HTML 文档 -->

<html lang="zh-cn"> <!-- HTML 文档开始 | lang="zh-cn" 中文声明 -->

<head> </head> <!-- 头部区域 -->

<body> </body> <!-- 主体区域 -->

</html> <!-- HTML 文档结束 -->

盒子模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包含元素的内容(content)、元素的内边距(padding)、元素的边框(border)、元素的外边距(margin)四个部分。这几个部分占由的空间中，由的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

居中布局

水平居中

行内元素：text-aligin:center
块级元素：margin：0 auto;
绝对定位已知宽度:position:absolute;margin-left:-(宽度的一半);left:50%;
绝对定位和transform:position: absolute;left: 50%;transform:translateX(-50%);
弹性布局水平居中：diaplay:flex;justify-content: center；

垂直居中

line-height:height;高度设置和盒子一样高
绝对定位和transform:position: absolute;top: 50%;transform:translateY(-50%);
弹性布局水平居中：diaplay:flex;algin-items: center；
绝对定位已知高度:position:absolute;margin-top:-(高度的一半);top:50%;

水平垂直居中

1.已知宽高100px

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px; 
    margin-top: -50px;

2.弹性布局

    display:flex;
    justify-content:center;
    aligin-items:center;

3.css3的transform属性

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

4.margin:auto

    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;

选择器的优先级

1.选择器越具体优先级越大
2.同等优先级写在后面的会覆盖前面的
3.加上！important 优先级最高
4选择器从右向左解析
!important > 行内样式 > #id > .class > tag > * > 继承 > 默认

CSS3 选择器

基本选择器：
*通配选择器
E 元素选择器
#id ID选择器
.class 类选择器
selector1,selectorN 群组选择器
层次选择器语法
E F 后代选择器（包含选择器）
E > F 子选择器
E + F 相邻兄弟选择器
E ~ F 通用选择器
动态伪类选择器语法
E:hover、E:active、E:focus、E:link、E:visited
UI元素状态伪类选择器语法
E:checked、E:enabled、E:disabled
结构伪类选择器使用语法
E:first-child、E:last-child、E F:nth-child(n)、E F:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type、E:only-child、E:only-of-type
否定伪类选择器
E:not(F)
属性选择器语法
[attribute]、[attribute=value]、[attribute~=value]、[attribute|=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]

CSS3 渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
1.CSS3 线性渐变
- 线性渐变 - 从上到下
  background: linear-gradient(red, blue);
- 线性渐变 - 从左到右
  background: linear-gradient(to right, red , blue);
- 线性渐变 - 对角
  background: linear-gradient(to bottom right, red , blue);
- 使用角度
  background: linear-gradient(angle, color-stop1, color-stop2);
- 带有多个颜色结点的从上到下的线性渐变
  background: linear-gradient(red, green, blue);
- 左到右的线性渐变，带有透明度
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
- 重复的线性渐变
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
  2.CSS3 径向渐变
- 颜色结点均匀分布的径向渐变
  background: radial-gradient(red, green, blue);
- 颜色结点不均匀分布的径向渐变
  background: radial-gradient(red 5%, green 15%, blue 60%);
- 形状为圆形的径向渐变
  background: radial-gradient(circle, red, yellow, green);

清除浮动解决父级高度塌陷

1.父级添加overflow方法：可以通过触发BFC的方式，实现清楚浮动效果。
2.使用after伪元素清除浮动：：after方式为空元素的升级版，好处是不用单独加标签了。（较常用）

    .clearfix::after{
        content:"";
        clear:both;
        display:block;
    }
    .clearfix{
    zoom:1;//兼容IE
    }

3.额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 ,设置样式clear:both;即可
4.给父元素设置高度

link和import的区别

@import只能用于加载css,兼容性不好，IE5以上才可以使用，@import只能等页面加载完之后才可以加载css
link当页面解析时，linky引入的css同步解析，link可以使用js动态导入，无兼容问题，还可以定义RSS,REL等作用

CSS预处理器（less/sass/styuls）

css预处理器的原理是：通过webpack编译转换成浏览器可读的css,在编译之前我们可以赋予预处理一些强大的功能

变量
嵌套
循环语句
条件语句
自动前缀
单位转换

css3动画

过渡动画：transition
- transition-proterty:设置过渡效果的名称如width
- transition-duration:时间
- transition-timing-function:曲线
- transition-delay:延迟时间
animation/@keyframes
- animation-name 规定需要绑定到选择器的 keyframe 名称
- animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线。
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。
- animation-direction 规定是否应该轮流反向播放动画。

媒体查询

当浏览器屏幕大于1000px时

    @media screen and (min-width:1000px){
        body{
            background:orange;
        }
    }

当浏览器屏幕小于1000px

    @media screen and (max-width:1000px){
        body{
            background:orange;
        }
    }

px、rem、em

px我们应该是再熟悉不过了吧。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言。
em是相对长度单位。其相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。
em的特点是：
1.em的值不是固定的。
2.em会继承父级元素的字体大小
- 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合： 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
rem这个单位是CSS3中新增的一个相对单位，目前移动开发使用也是最广泛的，它也是一个相对单位，它的相对和em就是不一样了，使用rem为元素设定字体大小时，仍是相对大小，不过相对的只是HTML根元素，是不是感觉比em要简单的多，不用时时去关注父级的情况。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

弹性布局

display:flex/display:inline-flex
有六个属性设置在容器上

flex-direction 决定主轴方向，
row水平起点左侧
row-reverse水平起点右侧
column垂直起点上
column-reverse 垂直起点下
flex-wrap 可以决定是否换行
nowrap不换行
wrap第一行在上面
wrap-reverse 第一行在下面
flex-flow 是flex-direction和flex-wrap的简写
justify-content 定义了在主轴的X对齐方式
flex-start 左对齐
flex-end 右对齐
center居中
space-between两端对齐间隔相等
space-around两侧间隔相等，项目之间比两侧大一倍
align-items 定义在Y轴的对齐方式
flex-start起点对齐
flex-end 终点对齐
center中间对齐
baseline与第一行文字的基线对齐
strech默认值，如果未设置高度则充满容器
aligin-content 定义了多根轴线的对齐方式
flex-start 起点对齐
flex-end 终点对齐
center 中间对齐
space-between 两端对齐轴线之间平均分布
space-around 线轴两侧间隔相等，线轴之间间隔比两侧大一倍
stretch 默认值线轴沾满交叉轴