在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容。这就可以nobr标签来实现。

一、nobr语法

<nobr>内容</nobr>

不换行内容放入<nobr>与</nobr>之间即可。

此标签与css white-space功能相同。

html form <label>标签基础语法结构与使用案例教程

在表单布局中会遇到label标签的使用,label没有任何样式效果,有触发对应表单控件功能。

比如我们点击单选按钮或多选框前文字对应选项就能被选中,这个就是对文字加了<label>标签实现。

Html上标:<sup>上浮内容</sup>

Html下标:<sub>下浮内容</sub>

通常一对未设置任何样式的span,高宽是自适应内容,多容多少,此标签就占用多少距离空间。

pan在html中常用的布局标签,与div标签区别在于,span随内容而占用高宽空间(紧贴内容),而一对div标签却占用一行。

首先,相同之处是br和p都是有换行的属性及意思

其次,区别<br />是只需一个单独使用,而<p></p>是一对使用

再次,br标签是小换行提行,p标签是大换行(分段)各行作用。

P和Br都有换行作用,p标签是段落标签,br是强制换行标签。

html删除线应用语法:

<s>www.divcss5.com</s>

html Hr水平线特点是100%宽度水平分割线,并且独占一行,hr水平线将与上下内容一定距离。

H1在一个网页中最好只使用一次,如对一个网页唯一标题使用。

H2、H3、H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度。

使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.

用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

通常单独使用left、right、top、bottom均无效,需要在使用绝对定位CSS position样式才能生效。

一般left和right在一个样式是只能使用其一,不能left和right都设置,要么使用left就不使用right,要么使用right就 不使用left,如果left和right均使用将会出现兼容问题,一个对象设置了靠左left多少距离,自然右边距离自然就有了所以无需设置左边。

.divcss5{text-indent:25px}

这里divcss5对象内段落首行开头文字缩进了25像素

css text-indent文本缩进样式属性单词,text-indent的值跟数字+单位组成缩进样式。

CSS代码:*{ padding:0; margin:0; font-family:"黑体"}

以上DIV+CSS中CSS代码意思:设置网页html中所有标签成员的css样式为padding为0,margin为0,字体为黑体。

这样就无需像以前那样分别设置网页不同标签元素的css样式表,这样就全面设置和初始化了html标签元素的CSS样式。

使用到的css样式属性单词text-indent抬头距离,letter-spacing字与字间距。

如果要让DIV布局居中浏览器中,加入margin:0 auto就不能加入float浮动样式,避免逻辑错误,造成布局居中不兼容。

无论大div盒子高度多高,小div盒子都居于大div盒子下面与大div底边对齐紧靠紧贴。一般这种不确定的布局要求,通常我们会使用css绝对定位布局来实现。绝对定位常用使用方法,对父级div设置position:relative,子级div设置position:absolute,即可再对子级div设置left或right、top或bottom即可定位子级位于父级里任何位置。

需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

DIV CSS 继承是指我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。一般只有文字文本具有继承特性,如文字大小、文字加粗、文字颜色、字体等。

CSS知识点小结的更多相关文章

  1. React及Nextjs相关知识点小结

    React及Nextjs知识点小结 函数式组件和类组件区别是什么 1.函数式组件是用于创建无状态的组件,组件不会被实例化,无法访问this中的对象,无法访问生命周期方法,是无副作用的,相比于类组件函数 ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  5. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  6. C++重要知识点小结---3

    C++重要知识点小结---1:http://www.cnblogs.com/heyonggang/p/3246631.html C++重要知识点小结---2:http://www.cnblogs.co ...

  7. C++重要知识点小结---2

    C++重要知识点小结--1 :http://www.cnblogs.com/heyonggang/p/3246631.html 1.C++允许程序员声明一个不能有实例对象的类,这样的类惟一的用途是被继 ...

  8. css知识点

    css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...

  9. CSS知识点集锦

      CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...

随机推荐

  1. export环境变量

    /etc/profile和/etc/profile.d/区别 [root@zzx conf]# vim /etc/profile.d/tomcat.sh   添加如下内容再运行脚本就可以添加环境变量 ...

  2. Python Learning Day6

    selenium操作 点击.清除操作 from selenium import webdriver from selenium.webdriver.common.keys import Keys im ...

  3. Python风格规范分享

    今天给大家分享Python 风格规范,以下代码中 Yes 表示推荐,No 表示不推荐. 分号 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 每行不超过80个字符 以下情况除外: 长的 ...

  4. idea新建java项目

    盘符下新建一个目录: 打开idea: Open -> 新建的目录: 右击目录 -> new -> module: 填写模块名 -> finish: file -> pro ...

  5. 身边的人工智能&人工智能发展史

    智能家具 扫地机器人 智能音箱 个人助手 在线翻译 谷歌翻译 微软翻译 YouTube 视频翻译 图像识别 人脸识别 AI+摄像头 下棋高手 Alphago 2017年打败柯洁 成为世界第一 Alph ...

  6. tensorflow---darknet53

    #! /usr/bin/env python# coding=utf-8#=============================================================== ...

  7. Git--rebase合并提交

    参考 https://blog.csdn.net/hj7jay/article/details/78809547 https://blog.csdn.net/yangcs2009/article/de ...

  8. 家中WIFI被人用WiFi万能钥匙共享后,我们应该怎么做?

    据之前WiFi万能钥匙官方称,其用户总数已经超过了8亿,且日活用户达到2亿,在海量APP中仅次于微信和QQ.可以想象有着数量如此庞大的用户,家里的WiFi是如何的"不保险". 而据 ...

  9. 干货 | 京东云托管Kubernetes集成镜像仓库并部署原生DashBoard

    在上一篇"Cloud Native 实操系列"文章中,我们为大家介绍了如何通过京东云原生容器实现Eureka的部署(

  10. 吴裕雄--天生自然 JAVASCRIPT开发学习: JSON

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...