前端学习笔记

CSS学习笔记

锚点的使用

<a name="锚点的名字">跳转后需要显示的内容</a>
<a name="#需要跳转到的锚点名字">文本内容</a>

在文本中使用Emojo

&#Emojo代码;(详情可在网络查看)

块级元素与行内元素的相互转换

关键字为 display

其中的属性为:

• block 将元素设置为块级元素，能设置尺寸，独占一行
• inline 将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定
• inline-block 将元素设置为行内块，能设置尺寸，占一行中的一部分

浮动float

主要的功能为调整页面中各个元素的所在位置

• float:left 常用属性 会将该元素自动的跟在前一个元素的后面,并且会自动的去掉缝隙

居中的方式

• 使用

  标签

• 使用外边距margin: 10px auto; 10px表示该所在容器上下外边距为10,quto表示自动分配左右剩余空间,就会居中

• text-align: center; 该容器内的文本会水平居中显示

隐藏元素的几种方式

• display:none 隐藏该元素
• overflow:hidden 超出部分隐藏

当元素溢出时的处理方式

处理的对象为被超出的父元素容器 默认为显示

关键字为 overflow

其中的属性为:

• hidden 将超出部分隐藏

• scroll 在该父元素容器内新增一个滚动条

• visible 超出部分会显示出来(默认的)

伪类

常用于鼠标悬停时的效果显示。

<style>
    /*选择某一个元素*/
     div : hover{
        在鼠标悬停时需要 展示的效果
    }
</style>

用于对某些元素在不同的情况下呈现不同的效果。

其中a标签在访问前、悬停时、访问时、访问后的四个状态

a标签伪类	作用
a:link	未访问时
a:hover	鼠标悬停
a:active	鼠标按住
a:visited	访问后

关于 li 列表标签的使用

通过 list-style-功能操作列表前额自增数的样式

• none 取消列表前的样式 常用的方案

• image 使用图片替换(如图片不同需要在每一个li标签里设置)

但是在取消后依旧会存在外边距

可以在最外增的样式中,加入取出默认的内外边距

<style>
*{
    margin:0;
    padding:0;
}    

</style>

border 边框

用于设计各个元素的边框样式,同时在设置好边框后,该元素里的背景不会超过边框

border: 1px solid red 设置一个1px宽 的红色直线边框

border-radius 1px; 设置边框的四个角为弧形(可以将边框弄成圆形)

去除轮廓 outline

使用 outline:none的方式去除轮廓

文本的样式

样式	作用	值
color	文本颜色	颜色的三种写法
text-align	文本对齐方式	默认left，right右对齐，center居中
lin