December_shi的博客

CSS设置多行文本溢出隐藏效果

设置单行文本溢出隐藏

CSS实现背景图片底部圆弧的效果

实现水平排列效果方法一：父盒子加属性：display:flex;justify-content:space-between;方法二：父盒子加属性：text-align:center;子盒子加属性：display:inline-block;flex伸缩布局的属性前提：父盒子添加属性 display:flex;一、主轴交叉轴排列下面的属性加在父盒子上1.默认排列：flex-direction:row;2.反向排列：flex-direction:row-reverse

动画总结一、多媒体标签二、新增input标签三、新增表单属性四、CSS3属性选择器五、伪类选择器列表六、CSS3动画七、2D转换八、设置元素旋转中心点九、2D转换综合写法以及顺序问题十、3D转换一、多媒体标签多媒体标签有两个，分别是：音频标签—audio视频标签—videoaudio标签说明可以再不适用标签的情况下，也能使原生的支持音频格式文件的播放。但是：播放格式是有限的audio支持音频格式audio目前支持三种格式格式IE9Firefox3.5

这里写目录标题1、JS获取DOM元素的方法（8种）2、事件鼠标事件键盘事件表单事件剪贴板事件3、load 和 DomContentLoade 加载4、自适应屏幕5、定时器设置及清除有关定时器的案例6、this指向（看不明白）7、navigator对象（一堆）8、if判断页面是PC端还是手机端显示9、JS同步、异步任务10、元素偏移量 offset 系列11、拖拽盒子1、JS获取DOM元素的方法（8种）通过ID获取（getElementById）通过name属性（getElementsByName）

遇到的两个问题1、使用伪元素实现竖线效果1.1.第一次尝试（出来效果，但是有问题）1.2.第二次修改（解决）1.2.1、拓展（transform:scale(); 属性）1.2.2、问题（scaleX 放大中心轴在元素中心）1.2.3、解决方法（添加 *transform-origin*: 0; 属性）2、如何实现进度条效果1、使用伪元素实现竖线效果1.1.第一次尝试（出来效果，但是有问题）/* 快捷导航li标签后的竖线效果 */.nav .n-nav li::after{ display

清浮动代码:(在父元素添加 clear类)/* 伪元素清浮动 */.clear::after { content: ''; display: block; clear: both;}未清浮动前：清浮动后：

CSS旋转效果：CSS代码：<style> div { position: absolute; left: 300px; top: 200px; width: 100px; height: 100px; background-color: #000; /* transform-origin: 0 0; transform: rotate(0deg); */

添加：cellspacing="0" cellpadding="0"代码：<table border="1" cellspacing="0" cellpadding="0"></table>

清除浮动的方法一、 给父级元素设高（一般不推荐使用）二、clear语法：选择器{clear：属性值} clear：清除属性值描述left不允许左侧有浮动元素（清除左侧浮动的影响）right不允许右侧有浮动元素（清除右侧浮动的影响）both同时清除左右两侧浮动的影响ps：实际工作中我们几乎只用clear：both三、额外标签法（隔墙法）是在w3c推荐的做法是通过在浮动元素末尾添加一个空的标签，例如：<div style="clear:both"&g

基础英语1.宽和高width: ; 设置宽height: ;设置高2.外边距 内边距margin: ; 设置外边距（top，right，bottom，left）padding: ; 设置内边距（top，right，bottom，left）3.字体设置font-size: ; 设置字体大小font-weight: ; 设置字体粗细color: ; 设置字体颜色4.表格属性border: ; 设置表格的边框（默认border=“0” 无边框）cellsp

盒子阴影（CSS3）语法：box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值blur可选。模糊距离。spread可选。阴影的尺寸color可选。阴影的颜色。请参阅CSS颜色值。inset可选。将外部阴影（outset）改为内部阴影前两个属性是必须写的，其余的可以省略。

内边距（padding）1内边距：padding属性用于设置内边距。 是指 边框与内容之间的距离。2设置属性作用padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距当我们给盒子指定padding值之后，发生了2件事情：内容和边框 有了距离，添加了内边距盒子会变大了。注意：后面跟几个数值表示的意思是不一样的。我们分开写有点麻烦，我们可以不可以简写呢？

盒子模型（CSS重点）1.盒子边框（border）语法：border:border-width || border-style || border-color属性作用border-width定义边框粗细，单位是pxborder-style边框的样式border-color边框颜色边框的样式：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线（最为常用的）dashed：边框为虚线dotted：边框为点线2.

1.CSS层叠性概念：所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉原则：样式冲突，遵循的原则就是**就近原则。**那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠。 CSS层叠性最后的执口诀：长江后浪推前浪，前浪死在沙滩上。2.CSS继承性概念：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。

text-align属性值都有值描述justify可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘center可以让文本居中对齐right可以让文本右对齐left是text-align的默认属性，它可以让文本左对齐...

优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;优先级为:1. 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。2. important 比 内联优先级高3. !important > id > class > tag4. 按CSS代码中出现的顺序决定，后者CSS样式居上；（近水楼台 先得月）5. 行内样式优先级specificity值为1,0,0,0 高于外部定义例： **`.

1.背景颜色（color）语法： background-color:颜色值;    默认的值是  transparent  透明色2.背景图片（image）语法： background-image:  none  |  url  (url)参数作用none无背景图（默认的）url使用绝对或相对地址指

设置元素为浮动后，display的值是多少？设置元素为浮动后，display的值是block

1.交集选择器(紧挨着)交集选择器是由两个选择器直接连接构成的，其中第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，这两个选择器之间不能有空格，必须连续书写p.txt{ color:blue;}<p>恰是一江<span class="txt">春水1</span>向东流</p> <!-- 不变蓝 --><span class="txt">春水2</span> <!-- 不变蓝

首行缩进2字符：text-indent: 2em;css样式：p{text-indent: 2em;} /*首行缩进2字符*/html代码： <p> 首行缩进两字符<br> br换行后将不会进行首行缩进效果 </p>注意：br换行后将不会进行首行缩进效果效果：...

语法：background: rgba(0, 0, 0, 0.5);最后一个参数是alpha透明度取值范围0~1之间。我们习惯把0.5的0省略掉这样写background: rgba(0, 0, 0, .5);注意:背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。因为是CSS3，所以低于ie9的版本是不支持的。...

透明色：transparentbackground: transparent;

a标签打开新窗口只需要在a标签后面加 target="_blank"<a href="index.html" target="_blank">跳转到新窗口打开</a>扩展：a标签后面加 target="_self" 是此窗口默认打开 (这个属性是默认的)<a href="index.html" target="_self">此窗口打开</a>...

代码解释a:link未访问的链接a:visited已访问的链接a:hover鼠标移动到链接上a:active选定的链接

<u>标签能实现下划线效果<u>u标签实现下划线效果</u>

<del>标签或<s>标签都能实现删除线效果 <del>del标签实现删除线效果</del> <br> <s>s标签实现删除线效果</s>

标签能使字体加粗<b>我是要被加粗的字体</b>效果：

元素之间是如何转换的：变为块级元素（独占一行，可控）：display: block;变为行内元素（不会独占一行，不可控）：display: inline;变为行内块元素（可设置宽高，margin,padding）：display: inline-block;元素之间的区别（特点）：一、块级元素：每个块级元素都独占一行。元素的宽度、高度、行高及顶部和底部边距可以设置。元素宽度在不设置的情况下，和它父元素的宽度一致。常用的块级元素有：div , p , h1~h6 , ol , ul ,

CSS实现圆角边框效果圆角边框属性：border-radius: 50%;效果：单个控制每个圆角的弧度是：border-top-left-radius: 20px; /* 左上角 */border-top-right-radius: 20px; /* 右上角 */border-bottom-left-radius: 20px; /* 左下角 */border-bottom-right-radius: 20px; /* 右下角 */演示下左上角的效果：...

去掉li标签前面的样式在li标签里添加这个属性：list-style: none;演示： 图1 修改前 图2 修改后

a标签去掉下划线在css里添加下面这个属性：text-decoration: none;演示： 图1 修改前 图2 修改后