美文网首页
CSS盒模型(第十五周)

CSS盒模型(第十五周)

作者: Persistence敏捷 | 来源:发表于2017-12-15 18:40 被阅读11次

本周学习内容:css背景和列表、css盒模型

一.HTML部分内容总结

基本框架

二.1.背景样式

back-ground-color:设置背景颜色
back-ground-image:把图像设置为背景
back-rround-position:设置背景图片的起始位置
back-ground-attachment:背景图片是否随着滚动条的滚动而滚动
back-ground-reprat:设置背景图片是否重复以及如何重复
background:简写属性

2.列表样式

list-style-type:设置列表标志的类型
list-style-image:将图像设置为列表项标签
list-style-position:设置列表中列表项的位置
list-style:简写属性

3.背景图片

①设置背景图片:back-ground-image:URL、none

注:引用时要

②背景图片的重复方式:repeat:重复;no-repeat:不重复;repeat-x:水平重复;repeat-y:垂直重复

③背景图片的显示方式:background-attachment:scroll(默认值,背景图片会随滚动条滚动)/fixed

④背景图片定位:back-ground-position:百分比、值、top、right、bottom、left、center

⑤背景颜色:颜色、transparent(透明)

⑥列表项标记的位置:inside、outside

(inside:列表项目标标记放置在文本以内,且环绕文版标记对齐;outside:默认值,列表项目标标记放置在文本之外,且环绕文本不根据标记对齐)

⑦列表样式缩写:list-style:list-style list-style-position list-style-image

顺序无严格界定,之间用空格分开,list-style-image的值会覆盖list-style-type的值

4.几个概念

get:将数据直接展示在URL地址的后面,具有一定的数据限制,保密性较差,用于数据的查询与获取

post:将数据整体打包发送,发送信息数量无限制,具有保密性,修改服务器下的一些资源

在何处打开action的URL

blank:在空的页面中打开
self;在当前的页面中打开
parent,top指在框架结构下使用

用HTML搭建网页,由外向里写

三大内容、;头部、主题、页脚

对于搜索引擎h1标签是一个很重要的标签

三.盒子模型

1.概念:盒子模型用来“放”网页中的各种元素;网页设计内容,如文字、图片等元素,都可使盒子(或者盒子的嵌套)

2.属性

宽高属性:width:长度值、百分比、auto
最大宽度:max-width:长度值、百分比、auto
最小宽度:min-width:长度值、百分比、auto

用于设置块级元素和替换元素的内容高度(eg:p标签内的内容是一个块级元素,占据一整行内容)

注:min-height:表示设置的最小宽度不能小于这个设定的值
   max-height:设置宽度的最大宽度

当最大宽度值小于最小宽度值时,以最小宽度值为准进行展示

宽高属性中,若只设置一个,另一个默认为auto(有具体的内容来决定)

替换元素与不可替换元素

不可替换元素如p标签,直接将内容显示在浏览器上

对于图片,通过CSS样式和属性设置其宽度或者高度的某一个,宽高属性会根据具体设置进行等比例缩放

对于图片即通过CSS样式来设置它的高和宽,又通过属性来设置它的高和宽,最终展示的样式为CSS样式中的对应设置

边框属性

如果不设置border-style,border-color和border-width属性值的设置将无效

①border-width:thin、medium、thick、长度值

②边框缩写:border:宽度 样式 样色

不同方向:border-top/bottom/left/right:宽度 样式 颜色

(设置之后对于四个表明来说就是有分别的)

padding属性盒模型内容到边框之间的距离

①内边距属性:padding-top:长度值、百分比,其他三个方向如例

但是值不能为负
②盒模型在网页中所占的空间,不单与width和height有关,还与padding有关

(每当设置一个padding值,盒模型的对应宽或高属性会增加)

③内边距属性的缩写:

padding:值1 (四个方向值都为一)

padding:值1 值2 (上下=值1 ,左右=值2)

padding:值1 值2 值3 (上=值1,左右=值2, 下=值3)

padding:值1 值2 值3 值4 (分别对应上下左右的值)

四.几个概念

1.AJAX

Ajax (异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术

XML:可扩展标记语言,用于标记电子文件使其具有结构性的标记语言

baike.baidu.com/item/可扩展标记语言/2885849
Ajax = 异步JavaScript和XML(标准通用标记语言的子集)

Ajax 是一种用于创建快速动态网页的技术

Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面

2.在前端开发中,什么是页面渲染?

www.zhihu.com/question/2011741

blog.csdn.net/buzhibujuell/article/details/68952370

渲染引擎(Rendering engine):负责解析用户请求的内容(如HTML或XML,渲染引擎会解析HTML或XML,以及相关CSS,然后返回解析后的内容)

3.BOOTSTRAP(web框架)

Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷

baike.baidu.com/item/Bootstrap/8301528

4.DOM(文档对象模型 (Document Object Model)

处理可扩展标志语言的标准编程接口

DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构

baike.baidu.com/item/DOM/50288

相关文章

  • CSS盒模型(第十五周)

    本周学习内容:css背景和列表、css盒模型 一.HTML部分内容总结 二.1.背景样式 back-ground-...

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

  • html+css 12

    开篇十二章 1、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型,...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

网友评论

      本文标题:CSS盒模型(第十五周)

      本文链接:https://www.haomeiwen.com/subject/txwdwxtx.html