HTML/CSS(2)

最新推荐文章于 2024-04-22 20:40:29 发布

小叮当仁不让

最新推荐文章于 2024-04-22 20:40:29 发布

阅读量282

点赞数

分类专栏： HTML/CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_44971069/article/details/108868990

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html和css基础

文章目录

html和css基础
- - 第一部分：

第一部分：

1.HTML 与 XHTML区别

HTML4.01 -> HTML5( 功能强大 )

XHTML : XML + HTML ( 严格版本的HTML )
    发展 XHTML2.0

区别：
    DOCTYPE文档及编码
        HTML5 : <!DOCTYPE html>
        XHTML和HTML4.01 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

        HTML5 : <meta charset="UTF-8">
        XHTML和HTML4.01 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    元素大小写 
        HTML5 和 HTML4.01 : 不区分大小写的，建议都写成小写(规范)
            <div></div> <span></span>
            <DIV></DIV> <SPAN></SPAN>

        XHTML : 要求必须小写。

    属性布尔值
        HTML5和 HTML4.01 : 当属性和属性值相同的时候，可以只写一个
            <input type="checkbox" checked>

        XHTML : <input type="checkbox" checked="checked">

    属性引号
        HTML5和 HTML4.01 : 属性值是可以不加引号的，但是建议添加（规范）
            <input type=checkbox>

        XHTML : <input type="checkbox">

    图片的alt属性
        HTML5和 HTML4.01 : 图片的时候alt属性可加可不加。
            <img src="">
        XHTML : <img src="" alt=""> 
        
    单标签写法
        HTML5和 HTML4.01 : 
            <img src="">
            <input type="">
        
        XHTML : 
            <img src="" />
            <input type="" />

    双标签闭合
        HTML5和 HTML4.01 : 
            <div>这是一个盒子  (不建议)

        XHTML : 双标签必须成对

            <div>这是一个盒子</div>

2.strong与b,em与i？都是内联

表现形态都是文本加粗和文本斜体
区别：具备语义化(strong,em)
语义化：就是用合理、正确的标签来展示内容，比如h1~h6定义标题。
语义化优点：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

3.引用标签？

blockquote : 引用大段的段落解释
q : 引用小段的短语解释
abbr : 缩写或首字母缩略词

 <p>
        <abbr title="World Health Organization">WHO</abbr>成立于1948年。
    </p>

address : 引用文档地址信息
cite : 引用著作的标题

4.iframe标签？

概念：iframe元素会创建包含另外一个文档的内联框架‘行内框架’

应用场景:数据传输，共享代码，局部刷新，第三方介入

可以引入其他的html到当前html中显示。
主要是利用iframe的属性进行样式的调节。

在这里插入图片描述

5.br 与 wbr ?

br 就是换行、 wbr 就是软换行（在指定时机进行换行）

6.pre 与 code ?

pre元素可以定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符；

针对网页中的程序代码的显示效果。

7.map和area

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

<img src="./img/star.jpg" alt="" usemap="#star">
    <map name="star">
        <!-- <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt=""> -->
        <!-- <area shape="circ" coords="300 130 50" href="" alt=""> -->
        <area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">
    </map>

8.embed 与 object ?

给flash和一些插件进行渲染操作的标签。

9.audio 与 video ？

引入音频与视频的标签。属于H5的功能。

10.文字注解：

<style>span{ direction: rtl; unicode-bidi:bidi-override; }</style>
<ruby>
        寒<rt>hán</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">爱神的箭</bdo>卡后端框架爱迪生
    </p>
    <p>
        <span>爱神的箭</span>卡后端框架爱迪生
    </p>

11.link:引入外部资源文件

添加网址标题栏前的小图标：

DNS预解析：

12.HTML5新的语义化标签？

header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航
注：header、footer、main 在一个网页中只能出现一次。

article : 独立的内容
aside : 辅助信息的内容
section : 区域
figure : 描述图像或视频
figcaption : 描述图像或视频的标题部分

datalist : 选项列表

<datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                    <option value="around"></option>
                </datalist>

details / summary : 文档细节 / 文档标题

<details open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>

progress / meter : 定义进度条 / 定义度量范围

 <progress min="0" max="10" value="5"></progress>
                <meter min="0" max="100" value="80" low="10" high="60"></meter>

time : 定义日期或时间

<p>
                    今天是<time title="2-14">情人节</time>，街上人很多。
                </p>

mark : 带有记号的文本

                <p>
                    今天是<mark>情人节</mark>，街上人很多。
                </p>

13.表格扩展学习？

添加单线 : border-collapse : collapse
隐藏空单元 : empty-cells : hide
斜线分类 : border / rotate
列分组 : colgroup / col

14.表单扩展学习？

美化表单控件:

label + :checked

label input{ display: none;} 
label div{ width:86px; height: 34px; background: url('./img/upload.png');}
.
.
.
<label>
        <input type="file">
        <div></div>
    </label>

position + opacity

 .upload{ width:86px; height:34px; position: relative;}
    .upload div{ width:100%; height: 100%; background: url('./img/upload.png');}
    .upload input{ width:100%; height: 100%; position: absolute; left:0; top:0; opacity: 0;}
    
    
    <div class="upload">
        <input type="file">
        <div></div>
    </div>

新的input控件:有拦截功能
email : 电子邮件地址输入框
url : 网址输入框
number : 数值输入框
range : 滑动条
date / month / week : 日期控件
search : 搜索框
color : 颜色控件
tel : 电话号码输入框 ( 在移动端会默认调起数字键盘 )
time : 时间控件

表单属性：
autocomplete : 自动完成默认 on / off（没有再次输入的提示）
autofocus : 获取焦点
required : 不能为空
pattern : 正则验证

method : 数据传输方式
enctype : 数据传输类型
name / value : 数据的键值对

扩展标签 :
fieldset : 表单内元素分组

legend : 为fieldset元素定义标题

<fieldset>
        <legend>登录</legend>
        <p>
            用户名：<input type="text">
        </p>
        <p>
            密码：<input type="password">
        </p>
    </fieldset>

optgroup : 定义选项组

<select name="" id="">
        <optgroup label="水果"></optgroup>
        <option value="">苹果</option>
        <option value="">香蕉</option>
        <option value="">猕猴桃</option>
        <optgroup label="蔬菜"></optgroup>
        <option value="">黄瓜</option>
        <option value="">白菜</option>
        <option value="">茄子</option>
    </select>

15.BFC规范

触发BFC规范的元素，可以形成一个独立的容器。不受到外界的影响，从而解决一些布局问题。
触发的样式：
float、display、position、overflow

作用:清除浮动；

自适应两栏布局；

避免margin重叠

16.浏览器前缀

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LaZ9Eh0B-1601363590457)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601358814131.png)]$

17.transition 过渡？

**注：不要加到hover上，**要是加在hover上只是瞬间的效果

transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) )
transition-timing-function : 规定速度效果的速度曲线。

linear(匀速),ease（默认）

<sytle>
div{ width:100px; height:100px; background:red;
        transition-property: all;
        transition-duration: 3s;
        transition-delay: -2s;
        transition-timing-function:cubic-bezier(.49,-0.75,.88,1.74);
    }
    /*div{ width:100px; height:100px; background:red; */
        /*transition: 2s 1s linear;*/
    /*}*/
    div:hover{ width:200px; height:200px; background:blue;}
    </style>

18.transform变形？
translate : 位移（100px,100px）只写一个值则只代表一个
translateX
translateY
translateZ ( 3d )

.box1{width:300px;height: 300px;border:solid red;margin:300px auto;}
        .box2{width:100px;height:100px;background: greenyellow;transition: 2s;}
        .box1:hover .box2{transform: translatey(200px);}
<div class="box1">
        <div class="box2"></div>
    </div>

scale :（2）简写和（2,2）相同的

缩放（值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）
scaleX
scaleY
scaleZ (3d)

rotate : 旋转（旋转的值，单位是角度 deg ）
rotateX (3d)
rotateY (3d)
rotateZ ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )

skew : 斜切
skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。
skewY

transform的注意事项：

变形操作不会影响到其他元素。
变形操作只能添加给块元素，但是不能添加给内联元素。
复合写法，可以同时添加多个变形操作。
执行是有顺序的，先执行后面的操作，再执行前面的操作。
translate会受到 rotate、scale、skew的影响
transform-origin : 基点的位置
x y z(3d)

19.animation 动画？

animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数，默认值就是1 ，infinite无限次数
animation-timing-function : 动画的运动形式

注：

（1）运动结束后，默认情况下会停留在起始位置。

（2）@keyframes : from -> 0% , to -> 100%

 <style>
 .box1{ width:300px; height:300px; border:1px black solid; margin:30px auto;}
.box2{ width:100px; height:100px; background:red; 
        animation:myBox 4s 2s infinite linear;
    }
@keyframes myBox{
        0%{ transform: translate(0,0); }
        25%{transform : translate(200px,0);}
        50%{ transform : translate(200px,200px); }//利用关键帧实现动画的定格
        75%{ transform : translate(0,200px); }
        100%{ transform : translate(0,0); }
    }
    </style>
<div class="box1">
        <div class="box2"></div>
    </div>

animation-fill-mode : 规定动画播放之前或之后，其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards : 在延迟的情况下，让0%在延迟前生效
forwards : 在运动结束的之后，停到结束位置
both : backwards和forwards同时生效

animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%_{100%)，一次反向(100%}0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%

20.animate.css？

一款强大的预设css3动画库。
官网地址：https://daneden.github.io/animate.css/
基本使用：
animated : 基类(基础的样式，每个动画效果都需要加)
infinite : 动画的无限次数

21.3D操作？

transform:
rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前，负值向后
scaleZ() : 立体元素的厚度

3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

perspective（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。

perspective-origin : 景深-基点位置，观察元素的角度。

transform-origin: center center -50px; （Z轴只能写数值，不能写单词）

transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d，产生一个三维空间)

backface-visibility : 背面隐藏
hidden、visible (默认值)

22.CSS3提供了扩展背景样式？

background-size : 背景图的尺寸大小
cover : 覆盖等比放大，所有的空间都被占满
contain : 包含将整张图片包含在内
background-origin : 背景图的填充位置
padding-box (默认)
border-box
content-box
background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box
注：复合样式的时候，第一个是位置，第二个是裁切

23. CSS3渐变？

线性渐变 -> linear-gradient是值，需要添加到background-image属性上
注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。
径向渐变 -> radial-gradient

24.字体图标？

font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
好处：
1.可以非常方便的改变大小和颜色
font-size color
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可使用计算机没有提供的字体

使用：
@font-face语法

像.woff等文件都是做兼容平台处理的, mac、linux等。

25.text-shadow:

文字的阴影
x y blur（模糊度） color （火焰字）

div{ font-size:60px; color:red; text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,   -2px -15px 11px #f80,2px -25px 18px #f20;}

注：阴影的默认颜色是跟文字样色相同
注：通过逗号的方式进行分割，可以设置多阴影

26.box-shadow：

x
y
blur
spread
color
inset
多阴影

.box{ width:200px; height:200px; background:red; margin: 100px;
        box-shadow: 10px 10px 10px 5px blue , 10px 10px 10px 5px green inset;
    }

注：盒子阴影的默认样色是黑色。
注：默认就是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影。

27.mask 遮罩

url
repeat
x，y平移
w，h大小，mask的尺寸
多遮罩
注：mask目前还没有标准化，所以需要添加浏览器前缀。
注：默认是x、y都平铺。

.mask1{width:300px;height:300px;background:url('./img/girl.jpg');-webkit-mask:url('./img/love.png') no-repeat 100px 100px/ 100px 100px;transition: 0.5s;
    }
.mask1:hover{-webkit-mask: url('./img/love.png') no-repeat center center/400px 400px;}

28.box-reflect：

above 上
below 下
left 左
right 右
距离
遮罩 | 渐变

.box{ margin:50px auto; width:300px; -webkit-box-reflect: right 20px;}
/*.box{ margin:50px auto; width:300px; -webkit-box-reflect: below 20px url('./img/love.png');} */
/*.box{ margin:50px auto; width:300px; -webkit-box-reflect: below 20px linear-gradient( rgba(255,255,255,0) 50% , rgba(255,255,255,1) );}*/
/*.box{ margin:50px auto; width:300px; transform: scale(1);}*/

渐变：只是针对透明度的渐变，不能支持颜色的渐变。

29.blur模糊

filter : blur()

img{ filter:blur(20px);}

30.calc计算

四则运算

.parent{ width:800px; height:300px; border:1px solid black;}
.box{ height:100px; width:calc(100% - 100px); background:red;}

31.分栏布局

column-count : 分栏的个数
column-width : 分栏的宽度
column-gap : 分栏的间距
column-rule : 分栏的边线
column-span : 合并分栏

注：column-width和column-count不要一起去设置。

32.伪元素：

伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。
另外，开发者还可以为伪元素定制样式。
:: selection
:: first-line / first-letter
:: before / after
伪类：为了弥补常规样式标签的不足。

33.CSS Hack分类（在IEtester上演示）

CSS属性前缀法
.elem{ _background:red; }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wnOL9FlR-1601819746173)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601780359263.png)]$

/* IE6 */
/* .box{ width:100px; height:100px; background: red; _background:blue;} */
/* IE6 7 */
/* .box{ width:100px; height:100px; background: red; +background:blue;} */
/* .box{ width:100px; height:100px; background: red; *background:blue;} */
/* IE6~9 */
/* .box{ width:100px; height:100px; background: red; background:blue\9;} */
/* IE8~11 */
/* .box{ width:100px; height:100px; background: red; background:blue\0;} */

选择器前缀法
*html .elem{ }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xldFfk3t-1601819746178)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601780443153.png)]$

/* IE6 *//* *html .box{ width:100px; height:100px; background:red;} */
/* IE7 *//* *+html .box{ width:100px; height:100px; background:red;} */
/* IE9及高级浏览器 *//* :root .box{ width:100px; height:100px; background:red;} */

IE条件注释法
IE10以上已经不支持注释法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bFPNHc62-1601819746183)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601780770249.png)]$

<!--[if gte IE 7]>
<div class="box">
</div>
<![endif]-->

34.IE低版本常见兼容BUG(浏览器的兼容处理)

透明度

/* opacity IE8及以下版本不识别 */
.box{ width:100px; height:100px; background:red; opacity:0.5;} 
.box{ width:100px; height:100px; background:red; opacity:0.5; filter:alpha(opacity=50);}

双边距

/* IE6下的双边距BUG */ 
.box{ float:left; width:100px; height:100px; background:red; margin-left: 50px; _display:inline;}

最小高度

/*IE6下的最小高度BUG , 最小高为19px */
.box{ width:300px; height:3px; background:red; overflow: hidden;}

图片边框

/* img边框问题 */
img{ border:none;}

35.渐进增强和优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。渐进增强观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

https://blog.csdn.net/qf2019/article/details/99550123?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160179440319724835822194%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160179440319724835822194&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_click~default-1-99550123.pc_first_rank_v2_rank_v28&utm_term=%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA%E5%92%8C%E4%BC%98%E9%9B%85%E9%99%8D%E7%BA%A7&spm=1018.2118.3001.4187

36.布局扩展

等高布局
利用margin-bottom负值与padding-bottom配合实现。

三列布局，左右固定，中间自适应

BFC方式

定位（左边固定，右边固定，中间使用margin居中）

浮动 ( 双飞翼布局、圣杯布局 )
margin负值

 *{ margin:0; padding:0;}
    .header{ height:100px; background:red;}
    .container .center{ height:200px; float:left; width:100%;}
    .container .center p{ background:yellow; height:100%; margin: 0 150px 0 100px;}
    .container .left{ float:left; width:100px; height:200px; background:blue; margin-left: -100%;}
    .container .right{ float:left; width:150px; height:200px; background:green; margin-left:-150px;}

36.1flex弹性盒模型（加给父容器的）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsZItCBF-1602079459754)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601882366531.png)]$

flex-direction(主轴方向): 1) row（布局为一行，从start开始排）

2) row-reverse(布局为一行，从end开始排)

3) column(布局为一列，从start开始排)

4) column-reverse(布局为一列，从end开始排)

flex-wrap(一条轴线排不下如何换行)：1) nowarp (不换行，在一行显示)

2) wrap(内容超过后换行)

3) warp-reverse(换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hJS8sW6u-1602079459762)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601861523762.png)]$

flex-item中的5个属性:order, flex-grow, flex-shrink, flex-basis, flex-self

order(排列顺序,值越大，越靠后)

flex-grow（放大比例，剩余空间怎么分配，首先必须有空余空间)

#box1 div:nth-child(2){background:yellow;color:mediumblue; flex-grow: 1; }

flex-shrink （缩小比例，超出空间怎么压缩）

1默认，0不收缩

flex-basis (item所占主轴空间，优先级高于width)

align-self (对齐方式，取值和align相同，覆盖align-items)，是针对某一个的上下左右居中。

justify-content:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lIChPfWW-1602079459773)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601861346863.png)]$

align-items:一行的值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6xVEI6iW-1602079459787)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601862249133.png)]$

align-centent:多行的值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e8Ja3b3g-1602079459793)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601862698349.png)]$

37.viewport:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IBOHPqLv-1602079459799)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601899356134.png)]$

38.网格布局:(一定是形成矩形)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ICSaqiA-1602079459808)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601882275391.png)]$

(一)作用在grid容器上

grid-template:网格区域

.box1{width:500px;height:500px;border:1px black dotted;display:grid;
            /*grid-template-rows:repeat(3,1fr) ;*/
            /*grid-template-columns:repeat(3,1fr);*/
            /*grid-template-areas:
            "a1 a1 a1" 
            "a2 a2 a3"
            "a2 a2 a3";*/
           grid-template:
            "a1 a1 a1" 1fr
            "a2 a2 a3" 1fr
            "a2 a2 a3" 1fr
            / 1fr 1fr 1fr;
        }
        .box1 div:nth-child(1){grid-area: a1;}
        .box1 div:nth-child(2){grid-area: a2;}
        .box1 div:nth-child(3){grid-area: a3;}
        .box1 div{background: #56fc90;border:1px solid  darkblue;}

grid-gap:网格间隙

grid-gap:10px 10px;//横   纵

justify-items align-items （每一个元素在当前网格中的排列）

place-items: start end;   // 纵   横

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DTREMk6G-1602079459811)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601885780478.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VEcxgDPM-1602079459816)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601885872160.png)]$

justify-content align-content:(针对所有网格)

place-content: space-between space-between;// 纵         横

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-urJ4WmHl-1602079459820)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601886552036.png)]$

（二）作用在grid子项上

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o1DnXQya-1602079459823)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1601887277003.png)]$

.box div{ background:red; border:1px black solid;
         grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end:  2; //grid-row-end: span 2;表示个数
        /*grid-column: 2 / 3;
        grid-row: 2 / span 2;*/
        grid-area: 3 / 2 / 4 / 4;   /* 第一个值是水平的起始位置 , 第二个值是垂直的起始位置，三个值是水平的结束位置，第四个值是垂直的结束位置 */

39.移动端布局

流式布局：大屏幕下显示更多的内容，但是宽屏下比例会有一点不协调

40.rem布局：

41.响应式布局

就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

#box{ width:100px; height:100px; background:red;}
@media all and (min-width:500px) and (max-width:700px){
        #box{ background:blue;}//500px-700px之间是蓝色
@media not all and (min-width:500px){
        #box{ background:blue;}//not取反
@media all and ( orientation:portrait ){
        #box{ background:blue;}//竖屏是蓝色
    }
    @media all and ( orientation:landscape ){
        #box{ background:yellow;}//横屏是黄色
    }
    
    base.css文件
    <link rel="stylesheet" href="base.css" media=" all and (min-width:400px) ">
    <link rel="stylesheet" href="base2.css" media=" all and (min-width:600px) ">
    
     <link rel="stylesheet" href="base.css" media=" all and (orientation:portrait) ">
    <link rel="stylesheet" href="base2.css" media=" all and (orientation:landscape) ">

.col-:<576 .col-sm-:>=576 .col-md-:>=768 .col-lg-:>=992 .col-xl-:>=1200

分辨率 540 720 960 1140

bootstrap:grid部分

https://getbootstrap.com/docs/4.5/layout/grid/

引入文件之后直接调用他们的class属性

    mr-auto : margin-right : auto;
    mt-5 : margin-top : 5rem;
    mt-md-5 : margin-top : 5rem; md响应式范围内添加
    mx-5 : margin-left : 5rem; margin-right : 5rem;
    my-5 : margin-top : 5rem; margin-bottom : 5rem;
    mt-n5 : margin-top : -5rem;
    py-5 : padding-top : 5rem; padding-bottom : 5rem;

bootstrap:content部分

https://getbootstrap.com/docs/4.5/content/reboot/

42.新特性

(1)自定义属性：(css变量)

<style>
:root{
        --color : red;
        --number : 100px;
        --number2 : 100;
        --size : 50px;
    }

    #box{
        /* --color : blue; *//就近查找
        background: var(--color);
        width : var(--number);
        height : calc(var(--number2) * 1px);
        font-size : var(--size , 100px);
    }
    </style>
    <div id="box">aaaaaaaaaaaaa</div>

(2)shape:CSS Shapes 布局可以实现不规则的文字环绕效果，需要配合浮动使用

#shape{
        width: 100px; height:100px;
        padding:10px;
        border:10px black solid;
        margin:10px;
        float:left;
        background: red;
        clip-path: polygon(0 0,0 100px,100px 100px);
        shape-outside: polygon(0 0,0 100px,100px 100px);
        shape-margin:15px;
    }

（3）css scrollbar实现自定义滚动条样式

body{ height:2000px;}
    html::-webkit-scrollbar{
        width:10px;
        /* height:1px; */
    }//滚动条的宽高设置
    html::-webkit-scrollbar-thumb{
        background: #f90;
        border-radius: 15px;
    }//滚动条的颜色
    html::-webkit-scrollbar-track{
        background:#dedede;
        box-shadow: inset 0 0 5px gary;
    }///滚动条的背景色

（4）css scoll snap滚动捕捉

<style>
    *{ margin:0; padding:0;}
    ul{ list-style: none;}
    #main{ 
        width:600px; height:100px; border:1px black solid; margin:100px; overflow: auto;
        scroll-snap-type: x mandatory;
    }
    #main ul{ width:4000px;}
    #main li{ width:300px; height:100px; background: red; float: left; margin:0 100px;
        scroll-snap-align: end;
    }
    </style>
    <div id="main">
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
            <li>5555</li>
        </ul>
    </div>

小叮当仁不让

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS(2)

第一部分：1.HTML 与 XHTML区别HTML4.01 -> HTML5( 功能强大 )XHTML : XML + HTML ( 严格版本的HTML ) 发展 XHTML2.0区别： DOCTYPE文档及编码 HTML5 : <!DOCTYPE html> XHTML和HTML4.01 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w
复制链接

扫一扫