在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容。这就可以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. V-Distpicker不能完整显示内容

    V-Distpicker插件在列表中,或者在dialog中只显示了第一次的内容,第二次就开始报错.这个和前篇中的地图问题其实如出一辙. 解决办法,重加载,局部刷新. <el-form-item ...

  2. multi-layer perceptrons, MLP)模型,CvANN_MLP。

    #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <ope ...

  3. BZOJ:2243: [SDOI2011]染色

    题解: 树剖,线段树维护区间颜色段数 记录两端点的颜色,做到O(1)合并 问题: 非递归建树实现 #include<iostream> #include<cstdio> #in ...

  4. java web实现在线编辑word,并将word导出(一)

    前段时间领导交代了一个需求:客户需要一个能够web在线编辑文字,如同编辑word文档一样,同时能够将编辑完成的内容导出为word文档并下载到本地. 我们选择了前台使用富文本插件的形式用于编辑内容,使用 ...

  5. UVA_12697 满足条件的最短连续和 线段树维护

    好印象深刻的题,前天选拔赛给跪了.怪我这种关键题没敲出来. 题意很简单,给你一串无规则的数列,再给个m值,求出满足 数列和>=m的长度最小的连续子串...确实一开始卡住了,因为看数据肯定是nlo ...

  6. jQuery中的一些方法 19.5.20课上笔记

    after() insertAfter():特定元素后面插入新的节点 before() insertBefore():特定元素前面插入新的节点 append() appendTo():向特定元素元素内 ...

  7. (5)opencv的基础操作和矩阵的掩模操作

    不懂的,可以简单,看看这个网址:https://blog.csdn.net/xiongwen_li/article/details/78503491 图片放到了桌面,所以,图片的路径就是桌面了,剩余的 ...

  8. PAT Advanced 1151 LCA in a Binary Tree (30) [树的遍历,LCA算法]

    题目 The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both ...

  9. 【php】Swoole之php高性能通信框架

    Swoole介绍 swoole是由c语言开发的异步网络通信引擎,被编译为so文件(swoole.so)作为php的extesion扩展. 与其他普通扩展不同: 与普通的扩展不同的是普通的扩展只是提供一 ...

  10. 新iPhone上市会让富士康迎来新一轮的“用工荒”吗?

    新iPhone上市,在接下来的几个月内,中国制造会迎来一段非常忙碌或者说忙乱的日子,之所以说忙碌,是在于苹果的订单量常常大得吓人,而之所以说忙乱,则在于连同富士康.和硕.绿点科技等制造业巨头都可能遭遇 ...