CSS命名规范和CSS和模型

CSS命名规范

• 不能以数字为开头，也不能是数字
• 遵循行业规范，例如：header头部、nav 导航、footer尾部...
• 可以使用驼峰命名法(第一单词首字母是小写，第二单词首字母是大写)
  • 例如：列表信息 listInfo list-info list_info

(1)页面结构
- 容器: `container`
- 页头：`header`
- 内容：`content/container`
- 页面主体：`main`
- 页尾：`footer`
- 导航：`nav`
- 侧栏：`sidebar`
- 栏目：`column`
- 页面外围控制整体布局宽度：`wrapper`
- 左右中：`left right center`

(2)导航
- 导航：`nav`
- 主导航：`mainbav`
- 子导航：`subnav`
- 顶导航：`topnav`
- 边导航：`sidebar`
- 左导航：`leftsidebar`
- 右导航：`rightsidebar`
- 菜单：`menu`
- 子菜单：`submenu`
- 标题: `title`
- 摘要: `summary`

(3)功能
- 标志：`logo`
- 广告：`banner`
- 登陆：`login`
- 登录条：`loginbar`
- 注册：`regsiter`
- 搜索：`search`
- 功能区：`shop`
- 标题：`title`
- 加入：`joinus`
- 状态：`status`
- 按钮：`btn`
- 滚动：`scroll`
- 标签页：`tab`
- 文章列表：`list`
- 提示信息：`msg`
- 当前的: `current`
- 小技巧：`tips`
- 图标: `icon`
- 注释：`note`
- 指南：`guild`
- 服务：`service`
- 热点：`hot`
- 新闻：`news`
- 下载：`download`
- 投票：`vote`
- 合作伙伴：`partner`
- 友情链接：`link`
- 版权：`copyright`

色值

• 英文单词 red、yellow...
• 16进制 例如：#ffffff 缩写 #fff，#ffhhaa 缩写 #fha，#ffbbca
• rgb r 红色，g 绿色，b 蓝色
  • color:rgb(255,24,30); color:#ff181e;
• rgba r 红色，g 绿色，b 蓝色，a 透明度 取值：0～1
  • color:rgba(255,24,30,0.4);

CSS之盒子模型 面试题

HTML元素看成一个大的仓库，盒子和盒子之间的距离margin(外边距)，盒子与商品之间有个白色泡沫是padding(内边距)，商品本身有宽度和高度（width/height），盒子本身有厚度border(边框)

CSS盒子模型有5个属性组成的

• 宽度 width
• 高度 height
• 外边距 margin
• 内边距 padding
• 边框 border

外边距 margin

第一种写法：多个值

• margin:1px 2px 3px 4px; 上 右 下 左
• margin:1px 2px 3px; 上 左右 下
• margin:1px 2px; 上下 左右
• margin:1px; 设置了四个方向的值

第二种写法：少值、设置1个值

• margin-top:1px; 上外边距
• margin-right:1px; 右外边距
• margin-bottom:1px; 下外边距
• margin-left:1px; 左外边距

margin外边距的兼容问题

• 两个元素是同级（平级）时，给第一个元素设置margin-bottom值，给第二个元素设置margin-top值时，两个元素之间的间距是取margin的最大值，而不是两个元素的margin相加之和

• 两个元素是包含关系时，给子元素设置margin-top值会出现值传递问题（值传递给了父元素）

  • 解决办法：
    • 1. 给父元素加一个css属性：overflow:hidden; 溢出隐藏
    • 2. 将子元素的margin-top值去掉，改成给父元素设置padding-top值 常用

margin外边距可以设置负值

margin-left:-40px;
margin-left/margin-top设置负值时，不会撑出浏览器的屏幕（不会出现滚动条），会被浏览器吃掉一部分

padding 内边距

第一种写法：多个值

• padding:1px 2px 3px 4px; 上 右 下 左
• padding:1px 2px 3px; 上 左右 下
• padding:1px 2px; 上下 左右
• padding:1px; 设置了四个方向的值

第二种写法：少值、设置1个值

• padding-top:1px; 上内边距
• padding-right:1px; 右内边距
• padding-bottom:1px; 下内边距
• padding-left:1px; 左内边距

在什么情况下使用margin外边距/padding内边距？

在什么情况下使用margin外边距
盒子和盒子之间的距离、块级标签与块级标签之间的距离，一般都设置外边距margin。例如：div/li..

在什么情况下使用padding内边距
盒子内的边距（间距）、行内标签与行内标签之间的距离，一般都设置内边距padding。例如：span/em/i..

border 边框

• border:1px solid red; 边框

• border-top:1px solid red; 上边框线

• border-bottom:1px solid red; 下边框线

• border-left:1px solid red; 左边框线

• border-right:1px solid red; 右边框线

• border-width:1px; 边框的宽度

• border-style:solid; 边框的样式（风格）

• border-color:red; 边框的颜色

利用border制作实心三角形

border-width来控制实心三角形的大小
transparent 透明度

.content{
    width:0;
    border:10px solid;
    border-color:red transparent transparent;
}
<div class="content"></div>

盒子模型的计算公式

allWidth = 本身内容的宽度 + 左右padding + 左右border
180 = 100 + 30+30 + 10+10
allHeight = 本身内容的高度 + 上下padding + 上下border
180 = 100 + 30+30 + 10+10