CSS篇累了，毁灭吧

<link> 引入CSS文件
<style> :渲染，要写在这个标签里
list-style: none; /* 清除列表项前标识符 */
margin: 0 auto;
class ：类 可以给标签设置类名，可以设置多个类名
* {通用选择器，全部样式}
id ： 可以给标签设置id名，id名是独一的
P {直接选中p标签}
. ming {点名，是选中类名标签}
#ming {是选中id名的标签}
color:red; 颜色：红色
background-color: rgba(0,0,0,0);  背景色：透明
background-color: transparent; 背景色：透明
background-color: yellow; 背景色：黄色
<div style="color: green;"> 里面的字体颜色为green
div:hover { /* 既是div又是悬停状态 */background-color: red;}
.danger.btn{ /* class值同时有danger和btn */} 并列选择器 中间没空格
div span {后代选择器} 中间是空格
div>span {子代选择器} 下面的儿子。孙子不算
p~span {兄弟选择器} p后面的所有兄弟span
p+span {相邻的兄弟选择器} 最接近p的一个span

伪元素

before:之前   after：之后   content：容纳
li::before {content:"子曰:";} 在每个li前面，显示 子曰：
li::after {content: "--摘自《论语》";} 在每个li后面，显示 --摘自《论语》
<a>超链接
<ul>块级父元素  <li> 是块级子元素
list-style:none; 去掉列表项的标识符
text-decoration: none; 去掉超链接的下划线
<div> 块级标签
width: 100px; 宽
height: 100px; 高
border: 2px solid black;   边框 粗细 实线 颜色
<input type="text">  输入框

文字大小和形状

浏览器默认的字体大小是16px
2em：字体大小为父级字体大小的2倍
2rem：2倍根元素字体的大小，也就是html字体大小16的2倍32px
font-family: "宋体hfiwehf","华文彩云"
font-weight: normal; /* 正常体 */
font-weight: bold; /* 加粗体 */
font-weight: lighter;/* 细体 */
font-weight: 400; /* 正常体 /
font-weight: 300; / 细体 /
font-weight: 600; / 粗体 */
/* 首行缩进两个字符*/
text-indent: 2em; /* 首行缩进两个字符*/ 也就是开头2个字符的空格
文字溢出影藏三件套
/* 强制内容不换行 /white-space: nowrap;  白色-空间：不换行
/ 溢出隐藏 /overflow: hidden;  溢出：隐藏
/ 文字溢出替换成省略号，还能告诉用户文字还没写完 */
text-overflow: ellipsis; 文本-溢出：省略

文字对齐方式

align ： 排列   阿莱
text：文本   泰克斯特
text-align: right; /* 靠右 /
text-align: left; / 靠左 /
text-align: center; / 居中 /
/ 将行高设置为与div等高，可以实现单行文本在父级中的垂直居中*/
text-align: center; / 居中 /  横向居中
line-height: 100px;   纵向居中
line ：界线
line-height: 2; 行高还可以使用数字，没有单位，表示2倍行间距

文字和图片的对齐方式

vertical ：垂直    喔低叩
vertical-align: baseline; /* 基线对齐,默认值 /
vertical-align: bottom;/ 底线对齐 /
vertical-align: middle; / 中线对齐 /
vertical-align: top; / 顶线对齐 */

盒子模型

box ：盒子 sizing：大小尺寸 content：容纳 border：边框

box-sizing: content-box; /* 默认值,盒子模型计算方案:内容盒子不用加

box-sizing: border-box; /*盒子模型计算方案:边框盒子 */ 不会影响内容宽度

margin：外间距 padding ：内间距

top ：上。 bottom：下。 left ：左。 right：右。

border-left: 30px solid #00f;/* 左边框 */ 设置一边的边框，只有一边

:hover 悬停

rgb表示法(24位色)

background-color: rgb(255,0,0);

rgba表示法(32位色)

第4个值是不透明度，1为完全不透明 0为完全透明

background-color: rgba(0,0,255,1);

#000; /* 黑色的常用写法 */

#fff; /* 白色的常用写法 */

#808080; /* 中灰的常用写法 */

用边框线写一个三角形：

width: 0; /* 必须要div的宽高都是0 /

border:50px solid transparent; / 四条边都是大大的透明边框 /

border-bottom-color: red; / 给单独的一条边框设置颜色 */

边框线：

border: none; /* 去掉边框 */

border-width: 10px; /* 单独设置四条边的粗细 /

border-style: dashed; / 线型为虚线 /

border-style: dotted; / 线型为点状线 /

border-style: double; / 线型为双实线 /

border-color: #ff0; / 设置四条边的颜色 */

行内元素的左右外间距生效,上下不生效

行内块四个方向的外间距均生效

相邻兄弟间的上下外间距会重合，取最大值显示

背景图 web css day6 p6html 位置

background-image: url(img/mr.png);

光插入背景图片不会显示，需要给元素设置宽高

可以同时添加背景图与背景色，没有图的地方就显示背景色

背景图的平铺/重复方式：

background-repeat: repeat; /* 重复默认值 /

background-repeat: no-repeat; / 不允许重复 /

background-repeat: repeat-x; / 只允许x轴重复 /

background-repeat: repeat-y; / 只允许y轴重复 */

background-position: center center; 水平垂直居中

background-position: right; 背景图放右边

背景图大小

cover 遮蔽 contain 包含

background-size: 900px 500px;

/* 背景图的尺寸可以使用百分比 auto表示自适应*/

background-size: 100% 100%;

background-size: 100% auto; /* 宽度100% 高度自适应牺牲高度 /

background-size: auto 100%; / 高度100% 宽度自适应牺牲宽度 /

background-size: contain; / 至少有一张完整的图呈现出来,多余的空间平铺 /

background-size: cover; / 铺满整个屏幕,多余的图片裁掉 */

精灵图：2步

d5 {
border: 1px solid #000;
/* 指定图标所在区域的大小 /
width: 128px;
height: 128px;
background-image: url(img/icon.png);/ 精灵图一定要设置背景图不重复！ /
background-repeat: no-repeat;
}
/ 当悬停时 /.
d5:hover {
/ 修改背景图的定位 /
background-position: -128px 0; / 向左移动128px 垂直方向不动 */
}

渐变效果

d6 {
width: 300px;
height: 200px;
/* 默认的渐变效果是水平的 */
linear 线性  gradien 坡度    deg 度
background-image: linear-gradient(red,green);
background-image: linear-gradient(45deg,red,green);
}

法国国旗：三色

d7 {
width: 300px;
height: 200px;
background-image: linear-gradient(90deg,blue 0 100px,#fff 100px 200px,red 200px 300px);
}

元素的隐藏方式：

display: none; /* 修改元素的显示模式为消失 */ 消失，释放空间

visibility: hidden; /* 设置可见度为隐藏，默认值为visible不隐藏 */ 保留空间

opacity: 0; 元素的不透明度: 0完全透明 1完全不透明

/* background-color: transparent; */ 背景透明

background-color: rgba(0,0,0,0); 背景透明

溢出 overflow

overflow: visible; /* 溢出可见默认值溢出的部分仍可以看见*/

overflow: hidden; /* 溢出隐藏溢出的部分直接裁掉*/

overflow: scroll; /* 两侧都显示拖拽条 */

overflow: auto; /* 在需要的方向自动添加拖拽条 */

变块：图片的幽灵空白节点，可以变块来去除

display: block; 显示：块

块级元素没有幽灵空白节点，我们可以把图片变为块级来去除

浮动：早期是为了实现文字环绕效果，现在都用弹性盒了。

float: right; 右浮动

float: left; 左浮动

浮动会脱离文档流，造成父元素高度坍塌，会脱离父级

解决办法：给父元素设置宽高，浮动不会脱离父级

/* 方案2:给父级设置BFC保护 // overflow: hidden; // 溢出隐藏

方案3:父元素也浮动，宽度就是3个孩子的宽度，高度也回来了

但是，还得考虑爷爷、太爷爷，这里不太合适*/

/* 方案4:在父元素最后添加一个宽高为0的块级子元素，不浮动，用来清除浮动影响 */

.z4 {

width: 0;

clear: both;

}

/* 方案5:利用伪元素在父元素最后生成一个假孩子清除影响 /

.clearfix::after{ / 在指定元素的最后生成一个假孩子 /

content: ''; / 内容是空白的,宽高为0 /

display: block; / 块级元素才可以使用clear属性 /

clear: both; / 清除前面所有元素浮动造成的不支撑影响 */

}

边框圆角

border-radius:25px;

border-radius:23%;

border-radius:10px 20px; /* 左上右下右上左下对角线*/

border-radius:10px 20px 30px; /* 左上右上左下右下*/

border-radius:10px 20px 30px 40px;/从左上角开始顺时针转/

border-top-left-radius:50px; /* 单独设置一个角的边框圆角 */

特殊形状：圆形

1.准备一个正方形 2.边框圆角为50%*/

width: 100px;

height: 100px;

border-radius:50%;

/* 特殊形状椭圆

1.准备一个长方形 2.边框圆角50%*/

width: 200px;

height: 100px;

background-color: #0f0;

border-radius:50%;

特殊形状：胶囊型

width: 150px;

height:60px;

border-radius:30px;

元素的阴影

shadow：阴影

值1:x轴偏移量默认值为0,数字越大越向右移动，可以有负值

值2:y轴偏移量默认值为0，数字越大越向下移动，可以有负值

值3:羽化值默认值为0 数字越大阴影效果越虚不允许有负值

值4:扩展半径默认值为0 数字越大阴影范围越大，可以有负值(用的较少)

值5:阴影颜色*/

box-shadow:5px 5px 3px 5px #aaa;

光标样式

cursor: default;/* 默认值箭头 /

cursor: pointer;/ 小手 */

cursor: crosshair; /* 十字光标 */

cursor: wait; /* 等待,转圈或者沙漏 */

cursor: move; /* 移动光标 /

cursor: text; / 文本光标工字型 */

输入框：input

border: 3px solid #f00;

border: none; /* 去掉边框 /

outline:none; / 去掉外轮廓线 */

定位 *

相对定位

相对定位不脱离文档流

position: relative; /* 相对定位 */ 位置：相对距离自己原来位置

z-index: 40; /* 调整层级,数字越大层级越靠上 */ 值还可以写负数

绝对定位--父相子绝

绝对定位脱离文档流

要用绝对定位需要先给父级加相对定位：position: relative;

绝对定位 position: absolute; 定位：绝对

固定定位

position: fixed; 定位：固定

给元素直接加，不需要加相对定位，加宽高，位置用top：300px，左20px。就可以

结构性伪类选择器

nth：第n个 child：孩子 last：最后的，倒数 first-：第一

ul li:nth-child(1) { color: green;} /* 选中ul下第1个孩子 */

ol li:nth-child(4n){color: purple;} /* 选中4的倍数 */

ol li:nth-last-child(3){color: red;} 选中ol中倒数第3个孩子

ul li:first-child {border: 1px solid #0f0;} 选中ul下第1个孩子 */ 第一

ul li:last-child { border: 1px solid #00f;}

p[title="news"]{color: red;} 选中p标签，有title属性且属性之为news

a[href^="https"]{color: yellow;} 选中a标签，有href属性，且属性值以https开头

img[src$=".gif"]{border: 5px solid #f00;} 选中img元素有src属性且属性值以.gif结尾

a[class*="pic"]{color: green;} 选中a标签，有class属性，且属性值中包含pic

input[readonly]{border: 2px solid #0f0;} 选中input并且包含readonly只读属性

弹性布局 display: flex; 变：活动，

flex的主轴方向

row ：行 column 纵列 reverse：颠倒 direction ：方向

flex-direction: row; /* 主轴方向为默认的正向行模式 / 12345

flex-direction: column-reverse; / 主轴方向为反向列模式竖54321

flex-direction: column; /* 主轴方向为正向列模式 / 竖12345

flex-direction: row-reverse; / 主轴方向为反向行模式 */ 54321

元素知否换行默认不换行 wrap ：换行

flex-wrap: nowrap;/ 默认值,不换行 /

flex-wrap: wrap;/ 换行 */

主轴方向+换行的简写形式 flow 流流动

flex-flow: row wrap; 行模式换行

flex-flow: column wrap；纵模式换行

弹性盒的对齐方式

justify:正确 content：容纳

justify-content: flex-start; /*默认值起点对齐 /

justify-content: flex-end; / 终点对齐 /

justify-content: center; / 居中对齐 / *→

justify-content: space-between; / 两端对齐 / *

justify-content: space-around; / 环绕对齐 /

justify-content: space-evenly; / 公平对齐 */

主轴方向→ 和交叉轴方向↓

垂直在主轴方向的是交叉轴

align-items: flex-end; /* 项目在交叉轴方向终点对齐 */

align-items: flex-start; /* 项目在交叉轴方向起点对齐 */

align-items: center; /* 项目在交叉轴方向居中对齐 */

浏览器页面变小元素收缩 nth-child 第几个孩子

shrink：收缩 grow：扩大 1-会 0-不会

.item:nth-child(3){flex-grow: 2; 父容器有剩余空间,第三个会增长*}

.item:nth-child(3){ flex-shrink: 3; /默认值,父容器空间不足时,项目默认会收缩，3是3倍收缩}

动画过度

transition：过度 2s：2秒

transition: 2s; /* 过渡最简形式只有一个过渡时间 */

transition: 1s 2s; 过渡时间在前延迟时间在后延迟2秒后，以1秒时间过度

transition: 2s all; 默认值all 过渡所有可过渡属性

transition: 2s border-radius; /* 只过渡了圆角,颜色没有过渡效果

ransition: 2s background-color,2s border-radius; /* 颜色与形状一起过渡

先过渡2s背景颜色，等颜色过渡完，再过渡圆角2s

transition: 2s background-color,2s 2s border-radius;

并不是所有属性都有过渡效果的，这个就没有 */

display: none;

过渡练习-按钮---CSS day11/p2

过渡练习-进度条 --CSS day11/p3

位移函数

transform:改变 translate：变为 X:主轴 Y：交叉轴

transform: translate(50px); 一个值为X轴移动

transform: translate(100px,100px); 两个值是2个方向移动

transform: translateX(80px); 指定X轴方向移动

transform: translateY(50px);指定Y轴方向移动

定位到正中心位置 ---用父相子绝

fu {

width: 600px;

height: 500px;

background-color: #ff0;

position: relative; /* 父亲使用相对定位作为子元素的参照物 /

}

.zi {

width: 100px;

height: 100px;

background-color: #f00;/ 要求:把子元素的原点(左上角)移动到父元素的中心点 /

position: absolute;/ 儿子使用绝对定位 /

left: 50%; / 距离父元素的左侧有参照物(父元素宽度)的50% /

top: 50%; / 距离父元素的顶部有参照物(父元素高度)的50% */

transform: translate(-50%,-50%);

/* 要求：实现子元素在父元素中的完全居中(父子元素中心点重合) */

/* 如果位移函数的值是百分比类型的，默认的参照物是元素自己 */

/* 也就是向左移动子元素宽度的50%，向上移动子元素高度的50% */

旋转函数rotate(30deg) 括号里放度

transform: rotate(30deg); 改变：旋转（30度）

transform: rotateX(60deg); 加X的就不是旋转了，压缩

transform: rotateY(45deg); 加Y的就不是旋转了，压缩

缩放函数scale() 大小 --CSS day11/p7

transform: scale(1); /* 大小不变 */

transform: scaleX(2); /* x轴放大2倍 */

transform: scale(0); 缩小到看不见，但元素还在

transform: scaleX(-1); /* X轴镜面翻转效果 */

transform: scale(-1); /* XY轴双方向镜面翻转效果*/

扭曲skew()

transform: skew(40deg); /* X轴 Y轴一起扭曲 */

transform: skewX(30deg);/* X轴扭曲 */

练习、悬停图片时，图片旋转、变大

父里面有个子图片，父给个宽高和溢出影藏，这样图片变大的时候不会超出父级

图片变块，宽100%，加过渡时间变化，悬停图片时，旋转10度，变大1.3倍

加动画效果，网站引入

CSS3过渡动画模板、CSS3 Transition动画模板--查错网

动画练习-小手垂直无限次位移 --CSS day12/p2

唱片式旋转和头像V字形移动 --CSS day12/p3

CSS篇累了，毁灭吧相关推荐

前端计划——面试题总结-CSS篇
前端面试之CSS篇 1.三种基本引入方式外部样式表 <link rel="stylesheet" type="text/css" href=" ...
java程序员 css_好程序员Web前端分享前端CSS篇
今天好程序员跟大家分享的文章是CSS篇.Web前端技术由html.css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很 ...
互联网公司2014前端笔试面试题：HTML/CSS篇
Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...
HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
HTML+CSS篇笔记
HTML篇 ctrl+F按照关键字查找需要的内容网页的组成: 结构(HTML).样式(CSS).行为(js)HTML:超文本标记语言ECMA:管JSW3C:管HTML,CSSxhtml:扩展超文本标 ...
前端面试题之CSS篇
前端面试题之CSS篇一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
(:◎)≡前端学习之CsS篇
前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...
CSS篇十——（3）
目录一.CSS的背景 5. 背景图像固定(背景附着) 5.1 使用方式 6. 背景属性复合写法 6.1 使用方式 7. 背景色半透明 7.1 使用方式 8. 背景总结一.CSS的背景 CSS设置背 ...

CSS篇累了，毁灭吧

CSS篇累了，毁灭吧相关推荐

最新文章

热门文章

CSS篇 累了，毁灭吧

CSS篇 累了，毁灭吧相关推荐

最新文章

热门文章

CSS篇累了，毁灭吧

CSS篇累了，毁灭吧相关推荐