IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > PHP开发 > css 学习之css 布局框架(第十天)

css 学习之css 布局框架(第十天)

时间:2017-01-18 08:30来源:原创 作者:恪己 点击:
一.css3.0新增 文本样式 1. text-shadow 文本阴影 2. text-overflow:clip剪切|ellipsis 实现省略号 white-space:nowrap 不折行 overflow:hidden 溢出隐藏 3. word-wrap:normal浏览器默认折行| break-world 长单词和URL实现
一.css3.0新增 文本样式
  1. text-shadow 文本阴影
  2. text-overflow:clip剪切|ellipsis 实现省略号
     white-space:nowrap 不折行
     overflow:hidden 溢出隐藏
  3. word-wrap:normal浏览器默认折行|
               break-world 长单词和URL实现折行
  4. @font-face:加载服务器上的字体,也就是客户端不用
                                 安装字体也可以显示服务器的字体
二.盒子模型(BoxModel)
  div:没实际意义的块元素,折行宽度是父级的100%
  span:没实际意义的行元素,不折行宽度是文本宽度
  1.width 宽度
  2.height 高度
    说明: 文本流(默认)布局,块元素和具有宽和高属性的标记(input img)
               可以设置宽高,行元素不能设置宽高
  3.padding:内边距,内容到边框的距离
    padding-top:value; 上内边距
    padding-right:value; 右内边距
    padding-bottom:value;下内边距
    padding-left:value; 左内边距
        缩写格式
    padding:value; 四个方向一个值
    padding:value value; 上下值  左右值
    padding:value value value;上值 左右值 下值
    padding:value value value value;
                         上值   右值  下值   左值
     说明:
     a.padding  没有负值,撑大背景色盒子.
  4.margin :外边距,盒子外围的距离
    margin-top:value; 上外边距
    margin-right:value; 右外边距
    margin-bottom:value;下外边距
    margin-left:value; 左外边距
        缩写格式
    margin:value; 四个方向一个值
    margin:value value; 上下值  左右值
    margin:value value value;上值 左右值 下值
    margin:value value value value;
    说明:
     a.margin 有正值和负值, auto.
       margin:0 auto;盒子的水平居中
     b.如果两个盒子margin冲突 左右值相加
              上下值取大值
     c.嵌套元素,如果给子元素上下margin会
             将上下margin值传递给父元素,如果冲突
             上下margin取大值
     d. 清除块元素的空隙(全局样式 reset.css)
        margin:0;
        padding:0;
   5. border :边框
     border-top-width:上边框的宽度
     border-top-style:上边框的样式
       (值: solid实线,dashed虚线,dotted点线
        double 双线)
     border-top-color:上边框的颜色
     
     border-right-width:右边框的宽度
     border-right-style:右边框的样式
     border-right-color:右边框的颜色
     
     border-bottom-width:下边框的宽度
     border-bottom-style:下边框的样式
     border-bottom-color:下边框的颜色
     
     border-left-width:左边框的宽度
     border-left-style:左边框的样式

     

------分隔线----------------------------
栏目列表
推荐内容