<meta name="keywords" content="xxxx">
<meta name="description" content="xxxx">
- 行内元素和块级元素
- 哪些元素能设置宽高
- css reset normalize 样式的重置 和 标准样式
- em 是什么
line-height: 1.15 表示什么
块元素补充：li from hr pre footer article canvas address table
- dl dt dd 配合使用也可独立存在占一行
- table tbody td tfoot thead tr 配合使用切它的子元素都是行内块元素
行内元素：small abbr acronym cite code dfn kbd samp var bdo br object q script sub sup
button label textarea
行内块元素： img video audio map 可以设置宽高 button
总结：
- 块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%
- 行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示
- 值得注意的是我们不建议在行内元素中嵌套块元素，这样不仅不符合开发规范，还会导致行内元素也独占一行。（可以相互嵌套）
- 块级元素都可以修改宽度
- 存在width height的元素可以修改宽度 img input table
- 大部分行内元素不能修改宽高 span,a,i,s,u,b,sup,sub，<input type="radio/checkbox">
- 如果要设置行内元素的宽高，有3中方式
- 《1》浮动 float: left right 元素一旦浮动后，变为块级元素，脱离文档流
- 《2》修改显示方式 display: none(没有显示，脱离文档流) block(变为块级元素) inline(不常用，变为和行内元素一样) inline-block(变为行内块元素) table(让元素和table一样，尺寸自动适应，独占一行)
- 《绝对定位》position:absolute 定位后的元素变为块级元素，脱离文档流，注意如果是相对定位是不可以的
reset 样式重置
w3c
手机端
* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; } img { border: 0 none; vertical-align: top; } i, em { font-style: normal; } ol, ul { list-style: none; } input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; color: #666; } body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }pc端
html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal } article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; } ul, ol { list-style: none; } img { border: 0 none; vertical-align: top; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } strong, em, i { font-style: normal; font-weight: normal; } ins { text-decoration: underline; } del { text-decoration: line-through; } mark { background: none; } input::-ms-clear { display: none !important; } body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; } a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; }Yahoo
/* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}a{text-decoration: none;}覆盖浏览器默认的样式
Normalize.css
是一个可定制的 CSS文件，使浏览器呈现的所有元素，更一致和符合现代标准。它正是针对
只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。这是一个现代的，HTML5-ready 的 [CSS 重置样式集。1. 保护有用的浏览器样式而不是去掉他们。
2. 一般化的样式：为大部分HTML元素提供。
3. 修复浏览器自身的bug并保证各浏览器的一致性。
4. 优化css可用性：用一些小技巧。
5. 解释代码：用注释和详细的文档来注意：Normalize支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和
表哥都进行了一般化。尽管这个项目基于一般化的原则，但我们还是在合适的地方使用了更实用的默认值如果你想手机端和pc端默认样式一样这是一个不错的选择，然后在定制自己的css
比如清除浮动，修改ul 间距 等
npm i normalize.css 或者去官网html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * 是测用的，可以定制自己的style */ ul { padding: 0; margin: 0; list-style: none; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; }
关于常用文本样式属性
- 网页文字字号通常是16px,浏览器支持最小为10px(HTML中不设置默认为16px)
- font-style: normal(i,em 设置为不倾斜) italic(倾斜字体) oblique(倾斜字体，不常用，用常规字体模拟)
- font-weight: normal(400) bold(700) 常用
- text-decoration: nome(没有修饰线) underline(下划线) line-through(删除线)
字体属性：
- font-family: serif,'Times New Roman', '宋体' , '微软雅黑' 英文字体放在中文字体的前面，后面的为备用字体 Microsoft Yahei SimSun 计算机默认有的字体宋体，微软雅黑，计算机中安装的字体才能用
- 自定义字体，阿里巴巴 https://www.iconfont.cn/webfont,点击生成字体，下载或者引用线上字体，输入框中的字体才能有用
行高：用 px % 小数表示 通常用小数表示 1.5 表示是字体字号的1.5倍，font-size:15px;
line-height: 如果不自定字体大小，那么就默认继承HTML默认的字体大小16px
单行文本垂直居中 行高=盒子高度 通常用px表示
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
去除图片底侧空白缝隙有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙
img { vertical-align: top; border: 0; }父盒子加一个border 就可以看出来
文字自动换行：word-break: break-word; white-space: pre-line;
文字溢出隐藏：overflow: hidden;
文字 溢出部分为...: text-overflow: ellipsis overflow: hidden;
文字多行后省略号
.dd {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
width: 30px;
}
-webkit 内核的浏览器 谷歌 edge Safari qq 360 搜狗 世界之窗 阿里云 等
设置text-align:center 文字水平居中
如果一个div中只设置了行高那么这个盒子的高度就是行高，故文字垂直居中
text-indent: 2em em表示字符宽度，默认缩进2个字符宽度
font属性的和写 font-style font-weight font-size line-height font-family
文本相关的属性 通常有继承性，只要给祖先标签设置，后代标签中生效
color font- list- text- line- 开头的
在继承的情况下，选择器权重计算失效，就近原则
选择器： 标签 类名 复合
关系选择器 box的直接后代 .box>p{}
兄弟选择器 img+span 紧挨着的2个标签
li {position:relative }
ul>li+li::before { // 表示出第一个外都添加了一条竖线
position: absolute;
content: '';
top: 0;
left: 0;
width: 100px;
height: 10px;
border-right: 1px solid red;
}
兄弟通用选择器 h2~span 在h标后面所以同级的标签
序号选择器： :first-child :nth-child 表示第一个 第几个 2n(Odd) 2n+1(even)
:nth-of-type(3) 表示某个类型的子元素
属性选择器：
伪类选择器：
伪元素：
::before ::after 创建一个伪元素，content表示其中的内容 字符串获取为空（要设置宽高），如果要做下拉等特效，给自身相对定位，伪元素绝对定位
::selection 选中文字背景色 div::selection{}
::first-letter ::first-line 选择某个元素（必须是块级元素）一个字符（第一行）
!important 提示权重
精灵技术
.ddy {
width: 500px;
height: 500px;
background: url('./1.webp') -10px -10p;
}
盒子边框
三角形 因为盒子的边框是点对点连接的故上边框的2个点向下连的时候相交形成倒三角
.cc {
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: red;
}
em: 1em=元素中文本的1个垂直高度 默认HTML字体大小为16px 1em = 16px根据父元素来计算的，优点兼容好，缺点不直观计算复杂
rem: css3 新出现的 自己根据根元素字体大小来计算，优点简单明了，缺点兼容不好，但是手机端不受到次限制
box-sizing: border-box; /* 怪异盒子模型 */
box-sizing: content-box; /* 标准盒子模型 */1. 用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。
2. 原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。
3. 可以同时设置 box-sizing属性来使用这一特性，是其改变border宽度也不影响其他元素；
4. box-sizing:简单理解就是盒子大小基于什么计算的;
浮动的元素一定能设置宽高，不在区分块级元素，行内元素，脱离文档流
BFC规范 块级格式上下文，是页面上一个独立的容器，不受到影响，形成BFC的方式
- float 基本不用
- 绝对定位 常用
- display： inline-block felx inilne-flex
- overflwo:hidden 常用 表示移除隐藏，padding部分显示
清除浮动
- 子元素 有浮动 父盒子添加 overflwo:hidden
- 子元素 有浮动 父盒子添加 clear:both margin失效 不推荐
- 在盒子上添加相同的伪类.clearfix::after{ content:''; clear: both; display: block } 常用
- 在两个盒子中间添加一个类名 .clearfix: clear:botn height:10px;
1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性
固定定位 只能一页面为参考点，没有子固父相的说法，脱离文档流的fixed,通常用于返回顶部，导航栏
sticky能形成动态固定效果，选择器 { position: sticky; top: 10px; } 常用
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效.st { position: sticky; top: 0; /* 设置透明度 */ background: rgba(0, 0, 0, .2); height: 130px; text-align: center; /* 设置毛玻璃效果 */ backdrop-filter: blur(15px); }
css背景
background-image : （./xx/1.jpg）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
background-size : 300px auto; 调整背景图片尺寸，宽300 高自适应，变为2张图
background-size : 50% auto; 并排显示2张
background-size : contain; 智能容纳到盒子中
background-size :cover; 智能撑满盒子
background-position : -100px 100px
background-position : 50% 50% 精灵图 设置背景 xy 绝对定位 宽高 ps拿到宽高xy
background-clip : padding-box; 背景渲染到padding区域包含padding
background-clip : content-box; 背景渲染到padding内不包含padding
background-attachment : scroll | fixed
简写：
background: transparent url(image.jpg) repeat-y scroll 50% 0/cover;
线性渐变
background-image: linear-gradient(#e66465, #9198e5); 从上到下
background-image: linear-gradient(to right, red 20% , yellow); 从左到右 0.2red
background-image: linear-gradient(-90deg, red, yellow); 0 90 180 -90
径向渐变
background-image: radial-gradient(50%,50%,red,white,blue); 不常用
CSS
transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的transform无法作用于 行内元素
- transform: translate(50px,100px); 平移 .dd{ xxx }translate(0,100px); translateY(100px)
- transform: rotate(30deg); 旋转
- transform: scale(2,3); 缩放
- transform: skew(30deg,20deg) 倾斜
transition 过渡
transition: property duration timing-function delay;
property 过渡的属性名称 width left 等数值型或 color颜色
duration 过渡需要的时间 s ms
timing-function 过渡速度曲线
delay 延时时长 m ms.gd {
width: 200px;
height: 200px;
background-color: aqua;
transition: width 1s linear 0s;
transition: left1s linear 0s;
left:0; 盒子冲左滑动到右边有过度效果
transition: transform 1s linear 0s;
transition: left1s linear 0s; 缓慢过度
}
.gd:hover {
width: 500px;
left: 100px;
transform: scale(1.2) rotate(360deg);
transition-timing-function: ease
left: 100px
}
animation: xx 1s linear 0s 3 alternate;
动画名称 动画完成时间 是否匀速 是否延迟 播放几次 作用播放
.xiao {
width: 200px;
height: 200px;
background: red;
animation: xx 1s linear 0s 3 alternate;
}
@keyframes xx {
0% {
transform: translateX(0)
}
100% {
transform: translateX(500px)
}
}
flex 布局
容器属性：div>div .d{dsplay:flex;}
- flex-direction 属性决定主轴的方向（即项目的排列方向）默认横向 row。.box {
flex-direction: row | row-reverse | column | column-reverse;
}- flex-wrap: nowrap | wrap | wrap-reverse; 默认不换行 向下 向上
- justify-content 属性定义了项目在主轴上的对齐方式 x轴 space-around 两边间距一样
- align-items 属性定义项目在交叉轴上如何对齐 Y轴
容器子元素属性：
- order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
- flex-grow 属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大
- flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小
- flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
- align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
display:none 实现的效果是 元素不进行渲染
visibility:hidden 会被子元素继承 一直存在
opacity:0 会被子元素继承 一直存在
filter 滤镜
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
/* 模糊 *img {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
/* 曝光 亮度*/img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
/* 对比度 */
css 变量声明
a {
--foo：#f1f2f5;
--bar: red;
color: var(--foo);
text-decoration-color: var(--bar);
}
表单控件 提交方法 提交地址 默认不刷新页面 表单名称
<form method="post" action="" οnsubmit="return false" name=""></form>
input控件
type 属性
label标签理解
label 标签为 input 元素定义标注（标签）
H4写法
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">H5写法
<label>
<input type="radio" name="sex" id="male" value="male">Male
</label>
textarea控件(文本域)
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea下拉菜单 使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>1. <select></select>中至少应包含一对<option></option>。
2. 在option 中定义selected =" selected "时，当前项即为默认选中项。
表格
创建表格
<style> table { margin: 0 auto; width: 300px; height: 200px; } thead, tbody, tfoot { padding: 20px; text-align: center; } </style> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <thead> <tr> <td>项目</td> <td>姓名</td> </tr> </thead> <tfoot> <tr> <td>小飞鱼</td> <td>晨晨</td> </tr> </tfoot> <tbody> <tr> <td>游乐园</td> <td>程大成</td> </tr> <tr> <td>游乐园</td> <td>程大成</td> </tr> </tbody> </table> </body>
扫一扫
1413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
