放歌于星辉-CSDN博客

原创 1.12 变形倾斜、动画属性以及弹性盒

变形倾斜、动画属性以及弹性盒一、变形倾斜x轴倾斜 transform: skew X(数值deg)y轴倾斜 transform: skew Y(数值deg)x y 轴倾斜transform: skew X(数值deg) skew Y(数值deg)二、动画属性1、定义动画（1）如果要加浏览器前缀的话@-webkit-keyframes name{ from{} to{} }（2）不加浏览器前缀的时候@keyframes 动画名{ 关键帧划分的时间 from{}

2021-12-26 22:24:24 146

原创 1.11 新增的语义化标签、表单标签和过渡、渐变属性以及怪异盒模型

新增的语义化标签、表单标签和过渡、渐变属性以及怪异盒模型一、h5中新增的语义化标签（块级元素）*重要特点：语义化header 头部footer 底部nav 导航main 主要内容区aside 侧边栏section 板块hgroup 标题组figure和figcaption 类似于dl 和ddmark 标记内联元素time 时间内联元素二、多媒体标签1、音频 audio<audio src="img/讲不出再见.m

2021-12-26 22:24:09 154

原创 1.16 移动端选型、权重精灵等补充知识及网格

移动端选型、权重精灵等补充知识及网格一、移动端选型1、pc+移动端(一套代码):响应式页面(媒体查询)2、 pc一套代码移动一套代码百分比布局(流式布局)flex布局rem+vw(等比例缩放)百分比+flex+rem+vw(混合布局)js的方法 flexble.js引入js文件设计图宽度是750，被除数设置7.5设计图宽度1224，被除数设置12.24二、补充的小知识点1、雪碧图/精灵图/css图片整合：主要使用background-position优点：减小图

2021-12-26 22:23:30 511

原创 1.10 C3选择器、阴影

C3选择器、阴影一、层级选择器1、后代选择器选择器选择器{}2、子代选择器选择器>选择器{}3、相邻的后面的兄弟选择器+选择器{}4、相邻的后面的兄弟们选择器~选择器{}二、伪类选择器1、结构性的伪类带child子元素： first-child{} 第一个孩子子元素： last-child{} 最后一个孩子子元素： nth-chlid(){} 第几个孩子括号里可以是具体的数字/ odd(奇数) / even(偶数) / 表达式（3n / 2n+1之

2021-12-20 22:55:28 272

原创 1.9 定位以及定位的层级、长截图的方法

定位以及定位的层级、长截图的方法一、定位 position : static;默认值，相当于没有定位二、相对定位 position : relative;参考物：元素本身的位置移动方向和距离： left / right / top / bottom :数值 px ;特点：移动会占位，原来的位置依然占据*三、绝对定位 position: absolute;参考物：有定位属性的祖先元素（父绝子相）如果祖先元素都加了定位属性，就近原则如果祖先元素中都没有加定位属性，参考

2021-12-20 22:54:15 173

原创 1.8 表单、表格和高度塌陷

表单、表格和高度塌陷一、表单1、关于form的添加一般只写样式的话，form可加可不加，但是涉及到功能就需要加。有重置按钮和提交按钮的话，把外层form加上，代表提交或者重织该form集合内兄的表单元素。2、input里面的属性placeholder=“提示文字” 提示信息checked=“checked” 默认选中disabled=“disabled” 禁止选中3、内联块元素的垂直对齐方式 vertical-alignbaseline 基线bottom

2021-12-20 22:53:33 440

原创 1.7 溢出、表格和表单

溢出、表格和表单一、溢出属性1、overflow / overflow-x / overflow-yvisible 溢出正常显示hidden 溢出隐藏scroll 溢出滚动auto 溢出之后显示滚动条，不溢出就不显示，常用2、溢出显示省略号（只能是一行文字）div{ white-space: nowrap; 文字不换行 overflow: hidden; 溢出部分隐藏 text-overflow: ellipsis; 隐藏掉的字用省略号

2021-12-20 22:52:53 105

原创 1.6 盒模型和margin的bug

盒模型和margin的bug一、盒模型1、内容区（content）：由宽高形成的区域2、内填充（padding）3、边框（border）:边框也会使盒子变大4、外边距（margin）:margin的值的设置和padding值一样margin单方向 margin-方向（top/right/left/bottom）:数值px;特点：不会撑大盒子margin可以设置负数对内联元素上下不生效，左右生效主要用来调整盒子和盒子之间的距离margin:auto; auto:四周；只

2021-12-20 22:52:18 128

原创 1.5 元素类型和继承、padding

元素类型和继承、padding一、元素类型1、块级元素div / p / h1 - h6 / ul / li / ol / dl / dd / dt / hr/table可以设置宽高独占一行块级元素水平居中 margin:auto; 参考父元素居中。文本缩进text-indent只对块元素生效。2、内联元素span / a / i / b / u / strong / em / del / sup / sub /伪类不能设置宽高可以在一行显示内联元素的代码之间的回车在

2021-12-20 22:51:43 248

原创 1.4 浮动、伪类和背景

浮动、伪类和背景一、浮动（重要）float: none/left/right应用场景：让纵向排列的元素横向排列。特点：如果需要元素横向排列的话，都要添加浮动才可以在同一行显示。加了浮动属性的元素会脱离文档流，后面的元素会占据原来浮动元素的位置，产生重叠的情况，遮挡住后面的元素，但是不遮挡后面的文字。当浮动的元素宽度大于外层容器宽度时，放不下的元素会调到下一行。注意：img引入的图片会自带底部大约3px的留白img{display:block}切片选中：ctrl+alt+shift+

2021-12-20 22:50:39 109

原创 1.3 文本和列表的属性

文本和列表的属性一、文本的属性1、字体类型 font-family:中文字体一般用“”引起来，不引也可以。多个字体之间用，隔开，从左到右执行，有哪个字体显示哪个字体，没有就显示默认值。英文字体是一个单词的，引号可加可不加，多个单词的是要加的。复合写法： font:加粗倾斜字体大小/行高字体类型；相关值拿过来用空格隔开。（出鞋大高兴）特点：加粗和倾斜的值可以省略剩余的三个都要有2、文本修饰 text-decoration (1)underline 下划线

2021-12-20 22:49:53 242

原创 1.2 选择器和文本属性

选择器和文本属性一、选择器1、后代选择器选择器选择器{}div .a{color: #008000;}特点：选择器格式不限制，选择器的格式不限制。用空格隔开的选择器之间必须是后代关系。选择器之间是可以跨代的。2、群组选择器选择器，选择器{}p,div,span{color: #0000FF;}特点：选择器种类不限制，选择器之间用，隔开，最后一个后面不要加。选择器的格式不限制。如果标签里的样式都相同的时候，可以用群组选择器。3、选择器的权重（1）选择器的权重

2021-12-20 22:48:57 131

原创 1.1 html布局和认识css

html布局和认识css一、布局标签（重点）div双标签板块。span小文本双标签包裹的文字是不带任何样式的。二、列表标签无序列表ul>li快捷键生成方式为ui>li*n(ul里面有n组li)应用场景：网页的导航、新闻列表、商品列表<ul type="square"> <li>西瓜</li> <li>苹果</li> <li>橘子</li> <

2021-12-20 22:48:10 324

m0_65273419的博客