웹 프론트엔드 HTML 튜토리얼 CSS之盒子模型与面向对象_html/css_WEB-ITnose

CSS之盒子模型与面向对象_html/css_WEB-ITnose

Jun 24, 2016 am 11:54 AM

从接触B/S到今天才三天,学习了二十几集的牛腩,在web设计的时候学到了CSS的盒子模型,感觉这个东西是真的好,一个简单的盒子理论就把一个网页设计的全部概括了,简直是抽象的一个杰出代表,这里就把自己对盒子的认识写出来,看完后相信大家会觉得盒子其实也就那么回事。

什么叫盒子

说到盒子,鞋盒,饭盒,总之是装东西的东西,所以在web中,他也是指装东西的一个容器。

盒子和OOP的比较

说道web盒子,我们先给大家一些名词:内容(content)、填充(padding)、边框(border)、边界(margin)我们就认为他就是一个盒子,也就是我们网页中要操作的对象,其实他和我们编程是非常的相似的,尤其是我们的面向对象,说道面向对象的基本,大家一定非常熟悉,继承,封装,那么我们来看看这个web这个盒子到底和我们的面向对象有多么的像。

 

1、OO:面向对象首先是面向对象的编程来实现,而盒子是面向盒子这个对象来写代码。都是对象 方法()

2、属性和方法:OOP中每个对象都有自己的属性和方法,很好,咱们的盒子有内容(content)、填充(padding)、边框(border)、边界(margin),这就是他们的属性,至于方法,下边的实例中我会给大家呈现出来。

3、继承:这个更是简单,在java中,我们要extends是吗,在CSS中,我们只需要空格就可以,具体怎么实现,请看下边的实现。

盒子的实现和面向对象的实现

如果我们要在网页的顶端放两张图片,一张是我们网站的logo,一张是我们一个链接到我们网页的图片。这个大家应该都很熟悉把,在新浪里边很多都是图片,我们单机就可以进入想要阅读的文章。那么我们先来实现一下这个简单的实现。

    <div id="top">            <a href="Default.aspx"><img  src="/static/imghw/default1.png" data-src="images/niunanlogo.jpg" class="lazy" alt="CSS之盒子模型与面向对象_html/css_WEB-ITnose" ></a>            <a href="http://www.tg029.com" target="_blank"><img  src="/static/imghw/default1.png" data-src="images/tg029logo.gif" class="lazy" alt="CSS之盒子模型与面向对象_html/css_WEB-ITnose" ></a>        </div>
로그인 후 복사
我先简单的解释一下,这两张图片就是代码中的niunanlogo.jpg,tg029logo.gif,第一张为logo,第二张为要和新闻有关系的图片,而新闻的链接是http://www.tg029.com。接下来我们来对这两张图片进行设计。

#top{   /*顶部样式*/  height:120px;  margin:10px auto 10px auto; /*外边界的上,右,下,左*/  width:760px;}#top img{    /*顶部图片样式,浮动向左*/    float:left;}
로그인 후 복사
然后这就是我们实现后的效果

那么他和OOP的相同点在哪呢,现在我再给大家实现一个简单的面向对象的例子。

 class Cat    {        private string name = "";        public Cat(string name)        {            this.name = name;        }        public string shout()        {            return "我的名字叫"+name+"喵";        }        public void 客户端()        {            Cat mimi = new Cat("咪咪");            MessageBox.show(mimi.shout());        }    }
로그인 후 복사
上边就是要给简单的面向对象的编程,我们首先要申明一个对象,然后再去实例化,之后调用方法就可以了,那么现在我们再看看我们的盒子是如何实现的。

首先他是把顶部设成top,也就是上边的

,class Cat写法不一样,但是思想还是一样的。然后我们再看属性,猫的属性有一个name属性,当然也可以有很多,但是咱们的盒子也是有四个属性内容(content)、填充(padding)、边框(border)、边界(margin),大家会问方法呢,猫的方法有shout(),其实在上边的float:left(向左浮动)就是一个方法,如果你还是想找茬的画,例如说继承呢,我怎么没有看到继承,其实上边照样有,top img{}就是一个继承,img这个对象继承了top的属性,而且实现继承只需要top后边加一个空格,然后写img就可以。 结语

如果大家说为什么这篇文章为什么没有CSS盒子的详细讲解,那么不好意思了,我也是刚刚学习,如果大家想学习的更深入的画,那么完全可以去买一本书去看,我只是在初次接触是发现他和我们后台的代码有异曲同工之妙用,都是实现了实现与内容的分离,也就是咱们的组合和聚合原则。而且既然大家有了面向对象的方法,在学习CSS的时候,完全可以按照OO的思想去学习,那么是不是会简单很多呢?这个问题还是等我学习完了再告诉大家吧。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

& lt; datalist & gt의 목적은 무엇입니까? 요소?

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

& lt; Progress & Gt의 목적은 무엇입니까? 요소?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

See all articles