zoukankan      html  css  js  c++  java
  • 牛腩新闻发布系统(三):CSS盒子模型及其基本内容

    导读:

    这些天一直在做牛腩的网页,比如什么首页、出错页、新闻内容页等。在学习的不断推进中,一些刚开始理解的不是很好的东西,也逐渐的深刻了起来。下面,就对这一段时间的学习,做一个总结。主要总结内容有:盒子模型,CSS选择器优先级,标准流和浮动。


    一、概念把握

    【1】盒子模型

    下图就是一个盒子模型的图例(将就着看吧,我也是尽力了!)。别的就不多说,相信这张图,大家都能看懂。主要说一下自己在学习后,对这些概念的理解。

    TOP:

    margin(边界、留边):现在看到它,我就想起以前老师讲on和over的区别。当margin-top为0 时,就等于on。也就是说边界为零,紧贴,就像把两个盒子紧紧的贴在一起一样。当margin-top不为0 时,就相当于over了,也就是两个盒子中间有一定得间隔或缝隙。

    优点:紧贴在一起的东西当然没有有空隙的东西易于取放,所以,设计好margin-top的值,会易于盒子的取放。

    border(边、边框):就是盒子本身的大小了。如果border值为100px,那么就代表着盒子长100个像素。

    padding(衬料、填充):这个最好理解了,尤其是网淘过瓶瓶罐罐的女性。通常,为了防止盒子里的东西被摔坏,会给垫上一层泡沫或是报纸什么的。而那个被垫上去的东西的长度大小,就是padding的大小。

    content(内容):这是实际物品的大小。比如说包裹中,那个瓶子的大小。


    注:1,在实际生活中,一个盒子只能装固定大小的东西,可是,在CSS中,盒子的大小,可以随着content的大小,自动扩充。呃,姑且当压缩袋理解吧!

    2,left、right、bottom同理top。



    【2】选择器:

    1,ID选择器:允许以一种独立于文档元素的方式来指定样式。

    2,类选择器:在 CSS 中,类选择器以一个点号显示。

    3,HTML选择器:用于来定义一类可以在同一个页面内重复利用的样式,或者自己定义的用于新闻列表的样式,详细的写好链接、列表、边框以及背景等属性,有些人还会习惯把一些常用的属性作为一个类。


    【3】标准流

    理解:标准流就像是VB过程中的顺序语句一样,写在前面的排在前面显示,写在后面的在后面显示。

    例外:加上了浮动等!

    注:优先级为:ID>类>HTML。


    二、实践学习

    1,块级元素<div>;ID选择器和类选择器



    样式表设置:


    2,行内元素<span>



    注:这是通过改块级元素为行内元素实现,也可以通过浮动实现。(前面的同块级元素,只更改样式表)



    3,盒子模型



    三、学习感受

    刚开始看见这个的时候,一点都不知道是啥。用多了吧,老是在写那几个东东,也就大概的知道了点。再一具体总结,就基本明白了。学习,要不断的重复、总结!

    我真的是借助网淘玻璃易碎品的经验理解的盒子模型,呃,不管怎么着吧,我觉得还是蛮形象的。



  • 相关阅读:
    Docker-网络命名空间
    Docker-为镜像添加SSH服务(CentOS)
    Docker-Dockerfile方式创建镜像
    Docker-Dockerfile方式创建数据卷容器
    MySQL-存储过程批量插入数据
    CentOS 升级内核
    集合-ConcurrentHashMap-jdk1.7
    Redis Lua脚本
    javascript中的string对象
    初识 控制台
  • 原文地址:https://www.cnblogs.com/hhx626/p/6010443.html
Copyright © 2011-2022 走看看