CSS基础

站长

2023年07月10日 17:56 · 阅读数 17

上面图片，下面文字

<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进行排序再从中选取括号中传递的数的child
element::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 //底线  一行文字字母最低的高度