块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性 行内元素与块元素可以通过display属性进行相互交换 display属性常用的属性值及含义如下： （1）inline：此元素将显示为行内元素（行内元素默认的 display属性 ...
转载
2021-11-01 12:18:00
325阅读
2评论
http://www.blogjava.net/youxia/archive/2006/12/26/90112.html
转载
精选
2013-12-29 11:33:16
485阅读
<!doctype html> <html> <head> <meta charset="utf-8"> <title>块元素与行内元素</title> <style> p{ background-color:pink;} span{ background-color:yellow;} i{ bac ...
转载
2021-11-01 12:33:00
309阅读
2评论
今天就花了一整天才完成对一张psd文件的网页布局，这效率确实有点慢了。在此，总结几点以后让以后少走弯路，并且还有条理性、目的性去完成任务。1. 首先拿到一张先分析它的结构，很有必要在纸上画画（并且对于div的margin、padding属性应该精确控制，再去进行div的布局）。对于切图这一方面应该以“资源尽量最小、图片”2. 完成对页面布局构思后，在制作网页时应该把握先整体后部分的思想3. 另外需要注意的一点是：margin 0px auto; 这一属性值应该是在html有引入W3C声明() 这是属性配置应该得加上。而且在html5网页中如果不加这些声明，可能有些标签的属性值不会生效。4. .
原创
2022-03-25 14:34:00
221阅读
CSS基础之几种常见的页面布局 本人前端菜鸟一枚，在学习 CSS 过程中发现网上流传的教程参差不齐，要么内容不够详细，要么方法就是错的，按照它给出的方法不能实现我想要的目的。于是自己决定写一篇经验。如有错误的地方，希望各位大神能够指出。话不多说，以下开始正文。第一部分 两列式页面布局 两列式的页面布局结构是页面中最常用的也是最简单的结构，尤其是在产品展
原创
2016-08-06 18:44:36
10000+阅读
点赞
1、rem基础rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素( html)设置font -size= 12px;非根元素设置width:2rem;则换成px表示就是24px。 rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制 2、媒体查询2.1什么是媒体查询媒体查询( Media Query )是CSS3
原创
2021-08-27 16:03:43
441阅读
网上也有不少使用div + css进行布局的教程，却存在很多缺陷，一是对css的布局模型讲解不清楚，让人很难理解相对定位、浮动等概念；二是虽然避免了“表格套表格”的缺点，却带来了“div 套 div”的缺点，过量使用div标签；三是class过多，造成class灾难。要正确使用css，对css的基本只是就不能够不了解。既然是漫谈，我这里就只讲四个方面，最后给出xkland项目作为实例。一、CSS中的块模型在CSS的定义中，有的html标签被浏览器当成一个块来显示，比如div、table、p、ul等等，我们称之为块元素；有的html标签被浏览器显示在文本行之类，如a、span、font等等，我们
转载
2011-10-21 01:23:00
175阅读
2评论
在设计网页时，能够控制好各个模块在页面中的位置是非常关键的。本章将讲解利用Div+CSS对页面元素进行定位的方法。 Div是HTML中指定的专门用于布局设计的容器对象 Div是CSS布局的核心对象。 Div本身与样式没有任何关系，样式需要编写CSS来实现，因此Div对象应该说从本质上实现了与样式的分
原创
2021-07-30 09:07:21
724阅读
采用大量的DIV和CSS样式设置进行页面布局及优化，html没什么难度就那些常用的标签以及div、div嵌套使用，掌握了这些东西技术上就没什么大的难度，CSS样式设置里面有一些设置要记住。写下此文留作笔记供以后参考。
原创
2015-11-24 12:49:11
1078阅读
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta -equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圣杯布局</title> <style type="t
原创
2022-04-06 13:35:01
109阅读
<html><body><div class="header" style="text-align:center">header</div><div> <div style="display:in
原创
2023-03-07 01:22:58
77阅读
一、属性 Properties属性Description简介 display 设置或检索对象是否及如何显示 float 该属性的值指出了对象是否及如何浮动。请参阅clear属性 clear 该属性的值指出了不允许有浮动对象的边。请参阅float属性 visibility 设置或检索是否显示对象。与d
原创
2022-05-25 09:41:42
248阅读
当我们在浏览浏览器的时候，经常会放大/缩小浏览器的显示比例，或者在不同的设备上。所处的分辨率也不尽同样。因此。我们须要学习一个新的知识：弹性盒模型。 弹性盒模型 实现项目对齐，方向，排序（即使项目大小位置动态生成），可以动态改动子元素的宽度和高度。具有良好的适配性。 如图就是弹性布局一个大概范围。
转载
2017-06-22 12:31:00
284阅读
2评论
CSS中，传统的布局依赖于盒装模型，靠display属性 + postion属性 + float属性组合。它对于一些特殊的布局四份不方便，例如垂直居中。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已经得到了所有浏览器的支持，所以，我们可以安全 ...
转载
2021-09-06 20:55:00
290阅读
2评论
拖动后怎么把布局结果保存呢？？我开始考虑是记录每个拖动对象的的坐标，可做起来我感觉好麻烦，所以就没有采用这种方法，我实现的方法是记录每列拥有的拖动对象，这样在初始或刷新的时候读取这列有哪些拖动对象，直接把拖动对象通过appenChild加进去就可以了，比如拖动后列的id为col2,在这一列的拖动对象的id为col1_2,col3_1,col2_1,我就把col2=col1_2|col3_1|col...
转载
2010-10-27 16:42:00
177阅读
2评论
前端的知识笼笼统统有很多，今天学习整理页面布局。在自己学习的时候，页面布局方面也是一个稍微有点难度的地方，通常需要一些时间构思，而且在写的时候都会遇到各种各样的问题，希望可以学到一个好的方法或技巧，利于页面布局的设计与开发。盒模型学习html，盒模型肯定是一个必备的知识，对盒模型的学习也是每一个初学者必学的知识点。 在一个文档中，每个元素都被表示为一个矩形的盒子。确定尺寸, 属性 — 像它的颜色，
转载
2021-06-04 21:06:37
906阅读
效果用到了bootstrap中的表格css、圆形css、以及上一页下一页css。布局页面，填充数据，实现js动态效果（比如点击下一页，上一页），逐步完善。不仅仅要会使用bootstrap中的样式，也要能够灵活的运用css样式，两者结合，才能够融会贯通，活学活用。1.表格部分 ...
原创
2021-08-05 16:41:28
218阅读
css3，页面布局实战，浮动
原创
2023-01-07 00:35:47
506阅读
这是《CSS设计指南》的读书笔记，用于加深学习效果。display 属性display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。blockdiv
转载
2020-01-19 20:21:00
88阅读
2评论
一、居中
布局 <div class="parent" style="width:300px;height:300px;"> <div class="child">居中
布局</div> </div> 水平居中（宽度自适应） 1.inline-block + text-align .child{ dis
转载
2020-10-19 16:37:00
188阅读
2评论
