上面图片，下面文字
<li><a href=""><img src="" alt=""><p></p></a></li>
在a标签里面，href=‘javascript:;’
首先：<a> 标签中必须提供 href 属性 但是这个就出现了一个问题，如果我不想让他跳转，那么这个时候href应该怎么赋值。有三种方法：
href=‘javascript:;’代表的是发生动作时执行一段javascript代码，但是这个代码是空的，所以什么也不执行href = ‘’：代表的是什么也不执行，但是用这种，动作发生之后，会刷新页面。href=‘#’：代表的同样是什么也不执行，但是用这种，动作发生之后，会自动跳转到页面顶端。
<a id="a1" href="">111</a>
<a href="#a1">111</a> //能跳转到id 为a1的标签地方去
<a href="#a2">111</a>
<a id="a2" href="">111</a>
<img src="" alt="钢铁侠">
//alt一个是图片加载失败时显示的描述信息，一个是在搜索引擎搜索时可以找到他 ，比如在浏览器搜索钢铁侠
//图片只设置一个宽或高，另一个会等比例缩放，不会让图片变形
直接设置行高就可以操作文字
<div class="box"></div>
.box {
width: 0;
height: 0;
border : 50px solid transparent;
border-left: 50px solid red;
}
- 去除行内块间隙
- 父元素设置
font-size:0 - 子元素在单独设置字体大小
直角三角形
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent ;
border-style: solid ;
border-width: 18px 10px 0 0;
}
css初始化
- 盒子模型
box-sizing - 标准盒模型
box-sizing: content-box(默认值) - 该模式下设置的宽高只是内容宽高，不包括内边距、边框，会被内容撑大
- IE盒模型、怪异盒模型
box-sizing: border-box - 该模式下设置的宽高包括内容宽高，内边距、边框，不会被撑大可以在css中设置通配符
{box-sizing: border-box;}
结构伪类选择器
E ：nth-child()选择父元素中的E元素 括号里面可以是数字 关键字 even odd 还可以公式 n 从0开始 没有的会忽略 n是全选，2n是偶 2n+1是奇数，5n是第五个第十个 选择5的倍数 ，n+5 是从第五个开始选 -n+5 是选择前五个E ：nth-child(1)会将父元素中所有child 先排序 然后先看的是nth-child(1)第一个child Z再去看是不是 E 如果不是，则选择器失效E：nth-of-type()会将指定E类型的child进行排序 再从中选取括号中传递的数的childelement::before{}伪元素选择器 是通过CSS创建出来的行内元素 在原有的html代码（文档树）中是看不见标签的 所以叫伪元素 必须有个content：‘’；before和after都是属于element，是element的子元素 是在其内部的 ，是在element内容前面和后面进行操作的，还是在element内部
clear 与 clearfix
clear 只能是新建一个空标签 给其加上类clear,而且这个空标签只能放在浮动元素的最后<div class="clear"></div> 紧挨着最后一个浮动元素后面 例如：
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<div class="clear"></div>
</ul>
clearfix 加在父元素上 在父元素的内容最后清除浮动 当第一排要求浮动，第二排不浮动，第三排要求浮动时，只能使用clear, 例如：
<ul class="clearfix">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
优先级权重:
继承 ＜类（class=""），伪类＜ id(id="gl") < style(style="") < !important
#gl{ id前面加#设置css
}
div {
color: red !important; 这个优先级最高
}
- 复合的权重会叠加 永远不会有进位
- 10个0001叠加成000,10 不是0010
- ul li 是0001+0001
- li 是 0001
ul li { color: red;}li {color: pink;}显示效果一定是红色 不论先后顺序 不会覆盖掉样式 因为权重叠加了
子元素字体的属性会默认继承父元素的设置
浮动以后具有行内块特性 inline-block
比如:
- 颜色(color)
- 大小(font-size)
- 行高(line-height)
- 缩进(text-indent)
- 对齐(text-align)
例外 a的颜色(超链接的颜色不会继承)
伪类:
- a:link 未被访问的链接
- a:visited 被访问过的链接
- a:hover 鼠标经过时
- a:active 正在按下鼠标还没有弹起
- input:focus 谁获得光标,就对谁设置
background-attachment:scroll 默认随屏幕滚动
background-attachment:fixed 背景图像固定
一般顺序：
background:背景颜色 背景图片地址 背景图片平铺 背景图片滚动 背景图片定位
font：font-style(斜体)
font-weight
font-size/line-height
font-family；
font 属性联写注意：
- 一定要包括
font-size和font-family这两项 font-size一定要在font-family前面
`font:12px/1.5 '微软雅黑';` //字体大小是12px 子元素行高是子元素字体大小的1.5倍
嵌套块元素垂直外边距的坍塌
子元素和父元素同时设置了margin-top值 则父元素会坍塌,达不到设置效果
解决方案:
1.为父元素设置上边框
border: 1px solid transparent` // 1px的透明实线边框 transparent 透明的
2.为父元素定义上内边距padding: 1px;
3.为父元素添加overflow:hidden 不增加盒子大小
4.行内块元素之间是有默认间距的,不会紧挨在一起 设置浮动可以解决间隙问题
复合操作
ul>(li>a+p)*3
效果如下:
<ul>
<li>
<a href=""></a>
<p></p>
</li>
<li>
<a href=""></a>
<p></p>
</li>
<li>
<a href=""></a>
<p></p>
</li>
</ul>
display: none元素隐藏,不再占有原来的位置visibility: hidden元素隐藏,继续占有原来的位置overflow: hidden将溢出的部分隐藏起来,没有删除overflow: scroll显示滚动条overflow: auto在需要的时候显示滚动条
单行溢出文字显示省略号
white-space: normal 默认自动换行 空白处理<br/>
white-space: nowrap 先强制不换行 wrap 释义换行 <br/>
overflow: hidden 再将溢出的部分隐藏起来<br/>
text-overflow: ellipsis 最后将文本溢出部分转化为省略号
多行溢出文字显示省略号 受浏览器影响
overflow: hidden
text-overflow: ellipsis
display: -webkit-box; 弹性伸缩盒子模型
-webkit-line-clamp: 2; 想让第二行显示省略号 限制在块元素显示的文本行数 控制盒子大小
-webkit-box-orient: vertical; 设置或检索伸缩盒子对象的子元素的排列方式
css 过渡
transform : rotate(360deg)// 360deg = 400grad = 1turn 旋转 如果想自然点 加如下;
transition: transform 2s;
transition：all 2s;
transition: width 2s,height 5s;
transition 过渡 在两秒内完成
transform : translate(20px,20px) 向x方向平移了20px 向y方向平移了20px 移动轨迹是他们的合力
transform : scale(0.5,2) 水平方向缩小到原来1/2，垂直方向放大到原来2倍
transform : skew(20deg,10deg) 倾斜
transition-origin 旋转的原点
transition-origin：top; 上边框中点
transition-origin：right;右边框中点
transition-origin：bottom；下边框中点
transition-origin：left;左边框中点
transition-origin：top left; 左上角
transition-origin：top right; 右上角
transition-origin：bottom left; 左下角
transition-origin：bottom right;右下角
当表单中的文本框被选中后，有个其他颜色的边框 想要去掉ta
outline: none 或者 0
input，textarea{
outline: none;
}
input属性 placeholder 更改字体颜色
input::placeholder{
color：pink;
}
- input 属性
requied该框必填 - input 属性
autofocus当刷新页面时，表单自动获得光标 - input 属性
autocomplete off/on获得历史输入记录 要有name属性 - input 属性
multiple多文件上传
文本域右下角是能够拖放大小的 不想被拖放
resize: none; 文本域尽量放一行 要不然容易有空格间隙
textarea{
resize: none;
}
css 属性选择器
E[att]选择具有att 属性的E 元素E[att=“val”]选择具有att 属性且值=val的E 元素E[att^=“val”]选择具有att 属性且值以val开头的E 元素E[att$=“val”]选择具有att 属性且值以val结尾的E 元素E[att*=“val”]选择具有att 属性且值包含val的E 元素
字体图标
1.下载图标压缩包
2.将其中的fonts文件夹放到文件的根目录下
3.在需要使用字体图标的页面中引用
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?61czyp');
src: url('fonts/icomoon.eot?61czyp#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?61czyp') format('truetype'),
url('fonts/icomoon.woff?61czyp') format('woff'),
url('fonts/icomoon.svg?61czyp#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
4.在使用字体图标的标签.声明字体图标例如span{font-family: 'icomoon';}
如果字体图标不够用，将压缩包中的selection.json文件在图标网左上角 import icons上传 选择好图标后 下载新 的压缩包即可，将之前的压缩包删除
cursor鼠标样式cursor: default一个箭头cursor: pointer一个小手cursor: move一个十字箭头cursor: not-allow一个圆圈里面一根斜线 禁止
表单属性不可输入
- disabled（连点击都失效） readonly
- js设置
btn.disabled = false关闭了disabled就是可用了 btn.disabled = true,开启了disabled就是不可用了- 同理还有 复选框 checked 下拉框 selected
vertical-align // 只对行内元素和行内块元素生效 设置图片和文字的对齐方式
vertical-align ：top line //顶线 一行文字字母最大的高度
vertical-align ：middle line //中线 一行文字字母中间的高度
vertical-align ：base line //基线 一行文字字母大部分相同的高度
vertical-align ：bottom line //底线 一行文字字母最低的高度
今天的文章编程的尽头是CSS分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/16955.html
