黑马程序员技术交流社区

标题: 【西安校区】学习前端web开发之重点知识点 [打印本页]

作者: 西安前端组 时间: 2018-4-19 10:00
标题: 【西安校区】学习前端web开发之重点知识点
经常用到的标签
常用标签
双标签
      h1-h6
      p
      ul>li 列表
      header  定义头部
      nav    定义导航
      footer 定义文档或节的页脚底部
      article 定义文章
      section  定义文档中的节（section、区段）
      aside 定义其所处内容之外的内容侧边
      strong  em ins del  文本格式化标签

      div
      <span>
单标签
      hr
      br
      <a href=""></a>
      <img src="" alt="" title="">
特殊字符标签
      < 小于
      > 大于
      ©  商标
         空格

常用选择器
类选择器（支持多类名）
id选择器
通配符选择器
链接伪类选择器 :hover
结构(位置)伪类选择器
      :first-child    选中第一个子元素
      :last-child    选中最后一个子元素
      :nth-child(n) even odd 2n 2n-1  4n等等
      :nth-last-child()  从下往上计算顺序，倒序
伪元素选择器  E::before(重要)  E::after(重要)
复合选择器(重要)
      并集选择器 p,h1,div
      后代选择器 .class h1
      子代选择器    div>p 直接子元素，不包括孙子
块级元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
行内块元素
<img />、<input />、<td>
行内元素
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
标签显示模式特性
便于以后布局，需要强加记忆！！！

常用css属性
文本属性
font-size:24px
font-family
font-weight
font-style
font: font-style font-weight font-size font-family
color
line-height

text-align
text-indent
text-decoration： none | underline
text-shadow:水平位置垂直位置模糊距离阴影颜色;
盒子背景设置
background:背景颜色背景图片地址背景平铺背景滚动背景位置
background-size 只对背景图片生效， cover|contain

CSS三大特性
层叠
继承
优先
行内块转换方式
盒子属性
margin
border
padding

width
height

border-collapse:collapse; 解决table表格合并引起的粗线

几个特殊的情况
      1、padding在父盒子设置宽度，子盒子没有设置宽度，但是使用padding设置左右就不会撑大盒子的宽
      2、margin的两个合并问题
      3、margin可以使盒子居中
      4、通配符： * {margin: 0; padding: 0}

boder-sizing:border-box  指定盒模型，盒子大小为 width,设置 border和padding不会撑开盒子

float
特性：
      1、浮：浮动的元素会脱离标准流，在页面上不占位置
      2、漏：浮动的元素只会影响下面的元素
      3、特：浮动的元素会改变元素显示方式，元素会具有行内块元素的特性
      4、浮动对齐父盒子的内边距

页面常见布局
      一列固定宽度且居中（最普通最常用的结构）
      两列左窄右宽型（小米官网）
      通栏平均分布型（锤子官网）
清除浮动
      本质：由于子元素脱标而引起的父元素高度为0 的问题。
方式
      1、额外标签法    <div style=”clear:both”></div>
      2、父级元素增加 overflow:hidden
      3、使用before和after双伪元素清除浮动
         .clearfix:before,.clearfix:after{
            content:".";
            display:table;
         }
         .clearfix:after{
            clear:both;
         }
         .clearfix{*zoom:1;}
切图常用快捷键
      1、V  选中选择按钮
      2、ctrl+j 复制并生成新的图层
      3、ctrl+g
      4、ctrl+shift+g
      5、ctrl+shift+alt+s
      6、ctrl+z  撤销一步
      7、ctrl+alt+z  撤销多步
      8、ctrl+e 可以合并图层

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2