Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型
- 一、盒子模型
- 二、 块级元素与行级元素✪✪✪
- 块级元素
- 行内元素
- 转化
- 三、导航栏的实现
一、盒子模型
盒子是页面内容的容器，通过盒子的堆叠、嵌套能实现网页布局
各属性：
- 大小（width、height）
- 边框（border）: 1px(border-width) solid (border-style) red(border-color)（红实线边框必背）
- 内边距（padding）
- 外边距（margin）
盒子计算
例如盒子的宽 = width+ padding-left + padding-right + border-left + border-right + margin-left + margin-right
二、 块级元素与行级元素✪✪✪
块级元素
- 元素会独占一行，且具有盒子的属性
- 常见块级元素：div , p , ul , form , table
行内元素
- 不会换行，横向排列
- 常见行内元素：span , a，img , input ，select
转化
- display：none（不显示）
- display：inline（转化为行内）
- display：inline-block（转化为行内块）
- display：block（转化为块）
三、导航栏的实现
<!DOCTYPE html>
<html>
<head><title>#</title><meta charset="utf-8"><style type="text/css">li{display: inline-block;width: 45px;height: 30px;border:1px solid red;}</style>
</head>
<body><ul><li>首页</li><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)相关推荐
- 只用半小时，只用半小时，只用半小时，给自己一个机会，看完保你web开发一期末不挂科，老师看了都说好
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站.点击这里 来还愿啦 Web开发(一)·期末不挂之第一章·Web开发基础(不背就挂的基础知识) Web开 ...
- Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础 一.单纯html控制样式的缺点 二. CSS✪✪✪ CSS概述 CSS基础语法 组成 选择器 标签选择器 类选择器 id选择器 通配选择器 后代选择器 插入样式表的三种方式 行内样式 ...
- 精通Web Analytics 2.0 （7） 第五章：荣耀之钥：度量成功
精通Web Analytics 2.0 (7) 第五章:荣耀之钥:度量成功 精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第五章:荣耀之钥:度量成功 我们的分析师常常得不到我 ...
- 掌握web开发基础系列--物理像素、逻辑像素、css像素
思考一下 什么是物理像素?什么是css像素? 在 <掌握web开发基础系列--长度单位> 这篇文章中已经介绍过了css像素单位--px,这篇文章详细探讨一下设备物理像素和css像素之间的关 ...
- 《微机原理第五版》期末知识总结（第五章---第七章）
微机原理与接口技术 本文承接上篇前四章的内容,对第五章到第七章做个期末总结,方便大家更好的掌握这门课的知识点.看到了这里说明你对这门课程还有很大的兴趣和执念,另外有配套的试题和PPT在我的主页可以翻阅 ...
- Web开发（一）·期末不挂之第六章·网页布局(浮动定位)
网页布局 一.网页布局发展 二. float 三.position 属性值 static:默认值 relative: absolute fixed 堆叠顺序 z-index 一.网页布局发展 原先:用 ...
- Web开发（一）·期末不挂之第三章·HTML基础二（html实现表格和表单）
HTML基础二 一. 表格✪✪✪ 二.表单 插入表单 输入标签✪✪ 多行文本域 下拉菜单 三.其他 label标签 内联框架 一. 表格✪✪✪ 插入表格: < table>< /ta ...
- 《WEB开发-HEXO博客搭建》第3章 Hexo博客域名添加
笔者博客地址 Hexo官方:https://hexo.io/ Hexo官方(中文):https://hexo.io/zh-cn/ 本章参考视频链接 前文笔者使用Hexo和GitHub搭建个人博客空间, ...
- 【web网页设计期末课程大作业】基于HTML+CSS+JavaScript仿山东传媒职业学院网站
最新文章
- C++查找算法（更新中）
- ListView setOnItemClickListener无效原因分析
- Axure教程:如何使用动态面板？动态面板功能详解
- 在VMware上装苹果系统后全屏
- ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
- Winform中实现向窗体中拖放照片并显示以及拖放文件夹显示树形结构(附代码下载)
- Scikit-learn 数据预处理之最大绝对值MaxAbsScaler
- SAP CRM Service Order search Tool
- redis watch multi exec 关系
- 最健康的睡眠时间究竟是多少？
- 通过分析等待类型解决系统产生问题
- python：json文件的保存与读取
- Maxwell 介绍
- c语言 游程编码,简单的行程编码-C语言实现
- H3C--网络设备基本配置与调试
- 洛谷——P1348 Couple number（java实现）
- char能不能存中文字符
- 腾讯副总裁邱岳鹏：云的发展要迈过三道关
- 58同城2018秋招前端笔试试题
- [docker]privileged参数