zoukankan      html  css  js  c++  java
  • ASP.NET动态网站制作(3)--css(2)

    前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位、浮动、盒子模型(第二次课)、css的具体应用(第三次课)、css3(第四次课)。今天的内容是关于css中定位、浮动以及盒子模型。

    内容:CSS最核心的内容,围绕div标签展开。

      1.做静态网页首先要考虑页面的布局,可用<div></div>来将网页分为不同的模块,就相当于盖房子一样。

      2.<div></div>是一个块元素,与之相对应的还有行内元素。

        块元素的特点:(1)块元素默认显示在父标签的左上角;(2)块级元素默认占满一行(占满整个文档流)。常用的块级元素有:div,form,h1-h6,menu,ol,ul,table,p。

        行内元素(内联元素)特点:(1)行内元素大小受到文字区域影响,不受width和height属性影响;(2)行内元素不会单独占满一行。常见的行内元素有a,span,img,input,label。

        行内元素变为块级元素:display:block;块级元素变为行内元素:display:inline;还有一个display:inline-block,既有行内元素的特点,也有块元素的特点,即:高度、宽度会受影响,但不会单独占满一行。

      3.浮动:float:left(第一个元素向左边靠,且第二个元素紧跟在第一个元素的后面,向左浮动),同理:float:right。设置浮动之后会对后面的元素造成影响,所以需要清除浮动的影响,使用:clear:left,clear:right,clear:both。

      4.盒子模型:设置模型的边框、内间距、外间距,即盒子模型有三个元素:border,padding,margin。

        border用法:border:solid 2px #000;border-top:dashed 2px #FFF;

        padding用法: padding:10px;(表示上下左右内间距都是10px)

              padding:10px 20px;(表示上下内间距为10px,左右内间距为20px)

              padding:5px 10px 20px(表示上面的内间距为5px,左右内间距为10px,下面的内间距为20px)

              padding:5px 10px 15px 20px(表示上面的内间距为5px、右面的内间距为10px、下面的内间距为15px、左面的内间距为20px)

              也可单独设置:padding-top,padding-right,padding-bottom,padding-left

              padding是将框撑大相应的距离,元素的尺寸会变大。padding对行内元素是支持的。

       margin用法:设置块和块之间的外间距,规律与padding相同。但是margin对于行内元素只支持左右外间距,不支持上下外边距。

      5.定位:position:absolute(绝对定位)和position:relative(相对定位)及position:fixed(固定位置)。

        position:absolute:设置为绝对定位时,元素脱离文档流,不会单独占满一行,不会受到浮动的影响;元素的方位受到窗体的上下左右影响。

        position:relative:设置为相对定位时,元素没有脱离文档流,会受到浮动的影响;元素的方位是相对元素的父标签。

        position:fixed:设置固定位置,如QQ弹框。该设置是脱离文档流的。

    后记:多多练习元素及属性的使用,在以后的应用中会用的比较多。

    Keep moving.
  • 相关阅读:
    HDU 4832(DP+计数问题)
    mongodb安装与使用
    (hdu step 6.3.7)Cat vs. Dog(当施工方规则:建边当观众和其他观众最喜爱的东西冲突,求最大独立集)
    dba_dependencies查询结果视图
    情绪一点点
    c#基于这些,你已经看到了?(一)-----谁才刚刚开始学习使用
    九. 200创业教训万元获得--“神刻”这是忽悠?
    初步swift语言学习笔记6(ARC-自己主动引用计数,内存管理)
    采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度
    线程的上下文
  • 原文地址:https://www.cnblogs.com/zoe-yan/p/4829308.html
Copyright © 2011-2022 走看看