前端html和css总结
本文最后更新于 757 天前,其中的信息可能已经有所发展或是发生改变。

1、html知识总结

1.1 表格的的相关属性

属性 表示
border-collapse 设置表格的边框是否被合并为一个单一的边框
cellpadding 单元格边距
cellspacing 单元格间距
valign: top 顶对齐 单元格内容垂直方向的对齐方式
valign: middle 居中对齐
valign: bottom 底部对齐
colspan 单元格可横跨的列数
rowspan 单元格可竖跨的行数

1.2 表单常用属性

属性 表示
name 对提交到服务器后的表单数据进行标识
checked 在页面加载时被预先选定的input元素
selected 规定在页面加载时预先选定该选项
readonly 只读元素
disabled 禁用元素
size 下拉列表中可见选项的数目

1.3 选择器的优先级

行内选择器 > id选择器 > 父代选择器 > class选择器 > 标签选择器 > *{}通配符选择器

1.4 有关间距的css属性

  • margin/padding:
    一个值:上下左右
    两个值:上下,左右
    三个值:上,左右,下
    四个值:上,右,下,左

1.5 有关边框的css属性

  • border-color:
    一个值:上下左右
    两个值:上下,左右
    三个值:上,左右,下
    四个值:上,右,下,左

1.6 取边框的圆角

  • border-radius: 20px;
    一个值情况下。四边都为20px;
    border-radius: 50px 10px;
    2个值得情况下:
    border-radius: (左上角 右下角)(右上角 左下角)
    3个值情况:
    border-radius: 50px 10px 20px;
    border-radius:(左上角) (右上角 左下角) (右下角)
    四个值得情况:
    border-radius: 80px 30px 15px 5px;
    border-radius:(左上) (右上) (右下) (左下)

1.7 有关浮动

属性 表示
float: left 左浮动 正常从左到右
float: right 右浮动 逆序 从右到左
float: none 不浮动(默认)
  • 特点:
    内容不覆盖,上一个元素做了浮动,下一个元素没有做浮动,下一个元素会自动顶上去。浮动不占位。
  • 清除浮动
    1、在哪个位置浮动,就在下方新建一个div
    clear: both; 清楚浮动

    不会去影响整体布局结构。
    2、父元素下的子元素浮动,会导致父元素塌陷 height=0 默认的div高度是根据内容来自动撑开
    解决方案:
    1:在父元素设置高度 弊端:不够灵活。
    2:在浮动的后面,添加一个div,清除浮动。 弊端:代码不够美观,可能会出现嵌套。
    3:在父元素上添加一个元素 overflow: hidden; 溢出隐藏

本文链接:https://likepoems.com/articles/html-and-css-summary/
转载说明:本站文章若无特别说明,皆为原创,转载请注明来源:likepoems,谢谢!^^
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇