CSS常见标签知识回顾
学前端的一点css笔记,参考的是黑马程序员pink老师的教程。
一.行内元素
1.一行可以显示多个
2.宽度核高度默认由内容撑开
3.不可以设置宽高
代表标签: a、span、b、ui、s、strong、ins、em、del
二、行内块元素
1.一行可以显示多个
2.可以设置宽高
代表标签:
input、textarea(文本框)、button、select
三、元素显示模式转换
display:block 转换成块级元素
display:inline-block 转换行内元素
display:inline 转换成行内元素
四、盒子模型
padding 内边距
margin 外边距
边框
solid 实线
border-style: solid;
dashed 虚线 dotted 点线
上边框为红色,其余为蓝色 从上往下运行代码 应该这样写
border: 2px solid blue;
border-top: 2px solid red;
padding 内边距 padding 也会 影响盒子大小。 直接减去weight和height就行
盒子 水平居中
margin 塌陷
产品模块案例 保证图片 显示完整
.box img {
width: 100%;
五:圆角边框
1.正方形设置为圆形
border-radius: 100px; 变成圆形
或者是这样
border-radius: 50%;
2.矩形变成圆润
圆角矩形设置为高度的一半
width: 200px;
height: 400px;
border-radius: 200px;
3.border-radius 从矩形左上角开始顺时针设置
border-radius: 200px 100px 20px 30px
六、盒子阴影/文字阴影
box-shadow: 10px 10px 10px 10px black;
文字阴影
七、浮动
网页布局方式
1.标准流
2.浮动
3.定位
纵向是标准流
横向排列用浮动
作用:可以让多个块级元素一行内排列
脱标
浮动注意事项
清除浮动
CSS书写顺序 (重要)
定位
定位=定位模式 边偏移
精灵图
字体图标
鼠标样式
css3
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhicejhc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22